Question

我正在使用

hashHistory.push('/home')

导航到我的应用上的某个路线。但是，每当我使用它时，我都会

Reducers may not dispatch actions.

如何在不收到此错误的情况下正确导航到某条路线？

Answer 1

假设您使用的是Redux，您可以使用thunk中间件和react-router-redux

https://github.com/gaearon/redux-thunk

https://github.com/reactjs/react-router-redux

这将允许您分派一个动作，减少它，然后再发送另一个动作

import { push } from 'react-router-redux'

const someAction = (somePayload) => (dispatch, getState) => {
  dispatch({
    type: 'SOME_ACTION',
    payload: { 
      somePayload
    }
  });

  // Get the updated state from the store and navigate
  let { someVar } = getState();
  if (someVar === 'some value') {
    dispatch(push('/home'));
  }
};


// Call like so
store.dispatch(someAction())

如果您不使用redux或者不想使用redux，请确保您没有在reducer或部分操作周期内调度操作

Answer 2

在我的情况下，我正在通过我的http请求（该请求设置为async: false）在减速器之后调度一个动作：

const reducer = (state, action) => {
   ...
   makeRequest();
   return {
      ...state
   }
}

makeRequest = () => {
    $.ajax({
        type: 'POST',
        url: `MYURL`,
        async: false,
        data: {
           ...
        },
        success: function(response) {
           store.dispatch({
             // new action dispatch here...
          });
        }
    }
)}

通过将异步更改为true async: true，我能够在ajax请求成功的情况下调度操作。

Answer 3

不是最好的解决方案，但它有效。减速机内部

  setTimeout(()=>{
           store.dispatch(
               //
             )
       },1);

反应 - ＆＃34;减速器可能不会发出动作。＆＃34;导航到路线后

3 个答案: