Calling dispatch method immediately results in "Reducer may not dispatch actions"

[DaBs]

As title states, calling a dispatch action with the current version (2.1.0), will result in redux throwing the error "Reducers may not dispatch actions" from here. It seems that since the call is immediate, that redux considers this to be a part of the reducer function it is currently executing. Encapsulating the dispatch call inside a setTimeout for just a single miliseconds works fine and throws no error.

Example:

export const fetchItems = () => {
  return dispatch => {
    dispatch({type: 'FETCHING_ITEMS'}); // Will throw error

    setTimeout(() => { dispatch({type: 'FETCHING_ITEMS'}); }, 1); // Works flawlessly

    // Rest of function code here that works flawlessly
  }
}

My use-case is updating the current state with isFetchingItems: true by dispatching the first function and then dispatch another function afterwards when the fetch has returned.

[artemjackson]

It's probably redux issue, please move it to redux repository and specify redux version.

[lbrdar]

Any news on this?

I have an action to handle login and then change route to new screen where component needs to fetch some data in componentWillMount() by dispatching an action to do so. This fails unless I use setTimeout, as DaBs showed above.

redux 3.6.0
redux-thunk 2.2.0

[DaBs]

@lbrdar As artemjackson said, I believe it's probably a redux issue, but in conjunction with thunk (or any other middleware for that sake), however it should be fixed in redux. This can be closed, but should be considered to be reopened at the redux repo.

[LaloHao]

Any update on this?

[benjiwheeler]

FWIW, I was seeing these errors when I put a debugger statement inside my reducer. Seems like there are assumptions redux is making when deciding that this error condition has been met that are either incorrect, or which involve complexity in the js execution innards.

[timdorr]

@benjiwheeler You shouldn't put debugger statements in a reducer because that makes it non-pure. Instead, put them prior to your dispatch calls, or in whatever you have subscribed to the store. When you stop execution like that, Redux still thinks it's within the dispatch because it is normally synchronous code. debugger turns it into async code, essentially.

[nzey]

Call the dispatch function like:

setTimeout(() => { dispatch({type: 'FETCHING_ITEMS'}); }, 0);

Why was this comment marked "resolved"? I would expect using 0, instead of 1, would also work. Does it?