Question

我有一个异步缩减器结构。在任何给定的页面上，我将页面的reducer注入：

export const injectReducer = (store, { key, reducer }) => {
  // store.asyncReducers already initialized to {}
  // makeRootReducer just returns combineReducers({...store.asyncReducers})

  store.asyncReducers[key] = reducer
  store.replaceReducer(makeRootReducer(store.asyncReducers))
}

我在任何给定页面上使用react-router 3和普通路由定义。我使用require.ensure来处理普通路由定义的getComponent内的路由的异步处理：

export default (store) => ({
  path : 'counter',
  getComponent (nextState, cb) {
    require.ensure([], (require) => {

      const Counter = require('./containers/Counter').default
      const reducer = require('./modules/counter').default

      injectReducer(store, { key: 'counter', reducer })

      cb(null, Counter)

    }, 'Counter')
  }
})

我的问题是，如果我使用dispatch后跟browserHistory.push，我会希望状态在转到新页面之前得到更新。然而，会发生的是，似乎有2个独立的商店。例如，在页面之间导航，尽管它在同一个键上，但是前一页的计数器值似乎仍然保留。这是怎么回事？

我问题的repo示例。您可以git clone，npm install，npm start转到localhost:3000/counter。如果您点击Double (Async)，它会使计数器加倍，然后转到/otherPage。如果您再点击Half (Async)，则会返回/counter。但是，计数器的值是doubling的值，而不是halving的值。此外，重要的是，提升Redux DevTools并在页面之间导航似乎显示之前所有数据的计数器更改。几乎就像整个商店被替换一样，但保留了先前的值。

这里发生了什么???

Answer 1

经过多次调查后，我发现在开发过程中，ReduxDevTools将在新页面上重新计算整个州的历史记录。在新页面上插入newState不同的新reducer会产生2种不同的结果。没有2个商店或任何缓存，只有redux dev工具重新计算具有不同initialStates的整个州历史。

因此在我的场景中，调度是在我的第一页上更新状态。然后browserHistory推送到第二页。第二页重新计算整个州的历史。但是第二页有一个reducer缺少第一页的动作处理程序。因此，当重新计算整个状态历史时，状态不会从最后一个动作改变。

使用react-router的async reducer似乎有多个商店？

1 个答案: