Javascript React Router Redux返回导致无限循环
我有一个用React+Redux构建的应用程序。我使用React路由器和React路由器Redux进行路由。我注意到了非常奇怪的行为。单击“上一步”按钮一次后,从0到-1将正常工作。但是,当您第二次单击它,打算从-1转到-2时,您将返回到0。随后的单击在0和-1之间循环。此行为与一致,而不是从历史中弹出并推到最后一个位置。这是这些库的预期行为吗?如果不是,我是不是用错了 以下是我认为相关的代码片段。文件不完整(太大),但我认为这是必要的,如果需要,愿意分享更多Javascript React Router Redux返回导致无限循环,javascript,reactjs,react-router,react-redux,react-router-redux,Javascript,Reactjs,React Router,React Redux,React Router Redux,我有一个用React+Redux构建的应用程序。我使用React路由器和React路由器Redux进行路由。我注意到了非常奇怪的行为。单击“上一步”按钮一次后,从0到-1将正常工作。但是,当您第二次单击它,打算从-1转到-2时,您将返回到0。随后的单击在0和-1之间循环。此行为与一致,而不是从历史中弹出并推到最后一个位置。这是这些库的预期行为吗?如果不是,我是不是用错了 以下是我认为相关的代码片段。文件不完整(太大),但我认为这是必要的,如果需要,愿意分享更多 root.tsx: import
root.tsx
:
import { Router, browserHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
const history = syncHistoryWithStore(browserHistory, store)
const renderAsyncConnect = props =>
<ReduxAsyncConnect
{...props}
helpers={{ client }}
filter={notDeferredItems}
/>
const Root = () =>
<Provider store={store} key="provider">
<Router render={renderAsyncConnect} history={history}>
{routes}
</Router>
</Provider>
export default Root
create store.js
:
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension/logOnly'
import { createStore as _createStore, applyMiddleware } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import clientMiddleware from './middleware/client-middleware'
import browseStateMiddleware from './middleware/browse-state-middleware'
import combinedReducers from './modules/reducer'
import types from './modules/account/types'
export default function createStore(history, client, data, persister) {
const storeData = data
// Sync dispatched route actions to the history
const reduxRouterMiddleware = routerMiddleware(history)
const middleware = [
browseStateMiddleware,
reduxRouterMiddleware,
clientMiddleware(client),
analyticsMiddleware,
thunk,
]
const composeEnhancers = composeWithDevTools(
{
// options like actionSanitizer, stateSanitizer
}
)
// See https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store/35641992#35641992
const rootReducer = (state, action) => {
if (action.type === types.LOGOUT) {
if (persister) {
persister.clear()
}
return combinedReducers(undefined, action)
}
return combinedReducers(state, action)
}
const store = _createStore(
rootReducer,
storeData,
composeEnhancers(
applyMiddleware(...middleware)
// other store enhancers
)
)
window.store = store
if (__DEVELOPMENT__ && module.hot) {
module.hot.accept('./modules/reducer', () => {
store.replaceReducer(System.import('./modules/reducer'))
})
}
return store
}
有什么问题吗?此问题很可能是由以下原因引起的:
const browseStateMiddleware = ({ dispatch, getState }) => next => action => {
if (action.type === '@@router/LOCATION_CHANGE') {
// some dispatching of actions deleted here for clarity
return next(action)
}
}
您分派的操作发生在路由在存储中更新之前,这导致此行为源自(我看到它在版本4.0.8中被复制)
处理此问题的一种方法是执行以下操作:
const browseStateMiddleware = ({ dispatch, getState }) => next => action => {
if (action.type === '@@router/LOCATION_CHANGE') {
next(action);
// dispatch your actions here
return;
}
}
这样,您就可以保证在正确的时间正确更新存储。我也有类似的问题。在哪里可以解决这个问题?
const browseStateMiddleware = ({ dispatch, getState }) => next => action => {
if (action.type === '@@router/LOCATION_CHANGE') {
next(action);
// dispatch your actions here
return;
}
}