reactjs - 外部还是 外部>？

Question

通常(react-router + redux):

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

为什么不反过来呢？

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

后续问题:设置身份验证，当LOGIN_SUCCESS时操作被触发，我们需要将返回的 token 保存到 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进行重定向(这就是为什么我问第一个问题，试图访问location代码中的redux)，我该怎么做？

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。