Redux 带react路由器的异步reducer似乎有多个存储?
我有一个异步减速器结构。在任何给定的页面上,我向页面的减缩器注入以下内容:Redux 带react路由器的异步reducer似乎有多个存储?,redux,redux-thunk,Redux,Redux Thunk,我有一个异步减速器结构。在任何给定的页面上,我向页面的减缩器注入以下内容: export const injectReducer = (store, { key, reducer }) => { // store.asyncReducers already initialized to {} // makeRootReducer just returns combineReducers({...store.asyncReducers}) store.asyncReducers
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。确保在普通路由定义的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
,我希望状态在进入新页面之前得到更新。然而,发生的事情是,似乎有两个独立的商店。例如,在页面之间导航时,上一页的计数器值似乎被保留,尽管它位于同一个键上。这是怎么回事
我的问题样本。您可以git克隆
,npm安装
,npm启动
,然后转到localhost:3000/计数器
。如果单击Double(Async)
,则计数器将加倍,然后转到/otherPage
。如果然后单击Half(Async)
,它将返回到/counter
。但是,计数器的值是来自加倍
的值,而不是来自减半
的值。此外,重要的是,拉起Redux DevTools
并在页面之间导航似乎会显示之前所有数据的计数器更改。几乎就好像整个商店都被替换了一样,但先前的值却保留了下来
这是怎么回事?经过大量调查,我发现在开发过程中,ReduxDevTools将在新的页面上重新计算整个州的历史。在新页面上的initialState不同的地方插入一个新的减速器,将导致两个不同的结果。没有2个存储区或任何缓存,它只是redux开发工具使用不同的初始状态重新计算整个状态历史
因此,在我的场景中,dispatch正在更新我的第一页上的状态。然后browserHistory推到第二页。第二页重新计算整个州历史记录。但是,第二个页面有一个reducer,它缺少第一个页面的操作处理程序。因此,在重新计算整个状态历史记录时,状态不会从上次操作更改