<Provider /> 外部还是 <Router /> 外部>？

Question

通常（react-router + redux）：

<Provider store={store}>
 <Router>
    <App />
 </Router>
</Provider>

为什么不反过来呢？

<Router>
  <Provider store={store}>
    <App />
  </Provider>
</Router>

后续问题：要设置身份验证，当触发LOGIN_SUCCESS 操作时，我们需要将返回的令牌保存到window.localStorage 并重定向页面。所以我在 redux 中间件中编写了成功处理程序：

const localStorageMiddleware = store => next => action => {
  if (action.type === 'LOGIN_SUCCESS') {
    if (!action.payload.error) {
      window.localStorage.setItem('jwt', action.payload.token)
    }
  } else if (action.type === 'LOGOUT_SUCCESS') {
    window.localStorage.setItem('jwt', '')
  }
  next(action)
}

然后我觉得需要访问history.push 进行重定向（这就是为什么我问第一个问题，试图在redux 代码中访问location），我该怎么做？

Answer 1

试试这个：

<Provider store={store}>
 <Router>
    <App />
 </Router>
</Provider>

重定向：

// top-most line of the reducer
import { browserHistory } from 'react-router';

const localStorageMiddleware = store => next => action => {
  if (action.type === 'LOGIN_SUCCESS') {
    if (!action.payload.error) {
      window.localStorage.setItem('jwt', action.payload.token);
      browserHistory.push('/');
    }
  } else if (action.type === 'LOGOUT_SUCCESS') {
    window.localStorage.setItem('jwt', '')
  }
  next(action)
}

我会将逻辑放到 actions 文件中，而不是 reducers。