javascript - React Router Redux 返回导致无限循环

Question

我有一个使用 React + Redux 构建的应用程序。我正在使用 React Router 和 React Router Redux 进行路由。我注意到非常奇怪的行为。当您单击后退按钮一次时，从 0 到 -1 有效。但是当你第二次点击它时，打算从 -1 到 -2，你反而回到了 0。随后的点击在 0 和 -1 之间循环。这种行为是一致的，而不是从历史推送到最后一个位置弹出。这是这些库的预期行为吗？如果不是，我是否错误地使用了它们？

以下是我认为相关的代码片段。文件不完整(太大)，但这是我认为必不可少的，如果需要，愿意分享更多。

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

我还有一个监听推送操作的中间件。我知道我被建议使用 history.listen，但这个中间件对竞争条件很健壮，并且只是为了在我们转换系统时暂时保持兼容性。

这是路由中间件之后的中间件的净效果:

const browseStateMiddleware = ({ dispatch, getState }) => next => action => {
  if (action.type === '@@router/LOCATION_CHANGE') {
    // some dispatching of actions deleted here for clarity
    return next(action)
  }
}

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
}

这里有什么问题吗？

Answer 1

这个问题很可能是由以下原因引起的:

const browseStateMiddleware = ({ dispatch, getState }) => next => action => {
  if (action.type === '@@router/LOCATION_CHANGE') {
    // some dispatching of actions deleted here for clarity
    return next(action)
  }
}

您分派(dispatch)的操作发生在商店中的路由更新之前，这导致此行为源自 react-router-redux (我看过它用 4.0.8 版转载)。

处理它的一种方法可能是执行以下操作:

const browseStateMiddleware = ({ dispatch, getState }) => next => action => {
  if (action.type === '@@router/LOCATION_CHANGE') {
    next(action);
    // dispatch your actions here
    return;
  }
}

这样您就可以保证在正确的时间正确更新商店。