Redux: Ação nunca vista quando despachada na Loja.

Criado em 16 mai. 2016  ·  3Comentários  ·  Fonte: reduxjs/redux

Eu tenho um projeto não React com o seguinte código
.

_index.js_

import configureStore from 'js/store/configureStore'

/* Redux Imports */
import { createPage } from 'js/actions/page'

// Boot the App
document.addEventListener('DOMContentLoaded', function () {
  const initialState = window.__INITIAL_STATE__
  const pageId = window.__INITIAL_STATE__.page
  const store = configureStore(initialState)
  store.dispatch(createPage(pageId))
})

*actions/page.js*
function initPage (pageId) {
  return {
    type: 'CREATE_PAGE',
    page: pageId
  }
}

export function createPage (pageId) {
  return dispatch => {
    dispatch(initPage(pageId))
  }
}

_reducers / page.js_

/**
 * Page Mediators get imported here
 * Page Mediators are brokers that hold page initialization.
 * The bundle includes all page mediators but they will not be activated
 * unless thre reducer calls them.
 */
import * as cart from 'js/templates/cart'

/**
 * This is a edge case, index.js boots the app and we are subscribing to 
 * a Redux @<strong i="11">@INIT</strong> action instead of adding one more layer of actions
 * which leads to unintended scenarios.
 */

const page = (state = {page: []} , action) => {

  console.log(state)
  switch (action.type) {
    case '@<strong i="12">@INIT</strong>':
      console.log('initializing page:' + state.id)
      console.log(state)
      dispatch({type: 'CREATE_PAGE',page: state.id})
      cart.init()
      return state
    case 'CREATE_PAGE':
      console.log('initializing page:' + state.id)
      cart.init()
      return state
    default:
      return state
  }
}
export default page

O problema que tenho é que actions/page.js nunca vê a ação CREATE_PAGE . Algum pensamento?

Comentários muito úteis

Não relacionado, mas

  • Este é um caso extremo, index.js inicializa o aplicativo e estamos assinando
  • uma ação Redux @ @INIT em vez de adicionar mais uma camada de ações
  • o que leva a cenários não intencionais.

pode quebrar seu aplicativo a qualquer dia.

Dizemos especificamente :

  • Estes são tipos de ação privada reservados pelo Redux.
  • Para quaisquer ações desconhecidas, você deve retornar ao estado atual.
  • Se o estado atual for indefinido, você deve retornar ao estado inicial.
  • Não faça referência a esses tipos de ação diretamente em seu código.

Todos 3 comentários

Não relacionado, mas

  • Este é um caso extremo, index.js inicializa o aplicativo e estamos assinando
  • uma ação Redux @ @INIT em vez de adicionar mais uma camada de ações
  • o que leva a cenários não intencionais.

pode quebrar seu aplicativo a qualquer dia.

Dizemos especificamente :

  • Estes são tipos de ação privada reservados pelo Redux.
  • Para quaisquer ações desconhecidas, você deve retornar ao estado atual.
  • Se o estado atual for indefinido, você deve retornar ao estado inicial.
  • Não faça referência a esses tipos de ação diretamente em seu código.

Obrigado @gaearon - pretendo remover isso, adicionei porque as ações que criei nunca são vistas - O que posso estar fazendo de errado?

Use StackOverflow para perguntas. Tentamos usar o rastreador de problemas para discussões de bug e recursos, mas não para suporte.

Quanto ao código, ele viola as restrições do Redux ao realizar um efeito colateral ( cart.init() ) e tentar despachar uma ação ( dispatch() ) dentro do redutor. Isso não é permitido, conforme observado mais de uma vez na documentação. Os redutores devem ser funções puras, portanto, você deve colocar os efeitos colaterais antes ou depois de despachar a ação.

Se você despachar dentro de um redutor, seu código deverá falhar. Se não falhar, talvez você tenha uma promessa de engolir o erro em algum lugar. É difícil dizer mais a partir deste trecho de código.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

parallelthought picture parallelthought  ·  3Comentários

vraa picture vraa  ·  3Comentários

cloudfroster picture cloudfroster  ·  3Comentários

ms88privat picture ms88privat  ·  3Comentários

dmitry-zaets picture dmitry-zaets  ·  3Comentários