"Error: You may not call store.getState() while the reducer is executing."

Question

I just upgraded my fully functional react-native app to Redux v4, but now I am getting the following error:

Error: Error: Error: Error: You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.

I suspect the problem is that I have numerous components inside others, each with their own connect(mapStateToProps, mapDispatchToProps)(Component) and I suppose this is not the correct way to implement it, though I am not sure the proper way to go about it.

Any direction is greatly appreciated!

Stack Trace:

    This error is located at:
    in Connect(SideBarApp) (at SceneView.js:9)
    in SceneView (at createTabNavigator.js:10)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in ResourceSavingScene (at createBottomTabNavigator.js:86)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in TabNavigationView (at createTabNavigator.js:127)
    in NavigationView (at createNavigator.js:59)
    in Navigator (at createNavigationContainer.js:376)
    in NavigationContainer (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:59)
    in Navigator (at createNavigationContainer.js:376)
    in NavigationContainer (at AppNavigator.js:36)
    in App (created by Connect(App))
    in Connect(App) (at index.ios.js:23)
    in Provider (at index.ios.js:22)
    in TheNewsApp (at renderApplication.js:32)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in AppContainer (at renderApplication.js:31)

This error is located at:
    in NavigationContainer (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:59)
    in Navigator (at createNavigationContainer.js:376)
    in NavigationContainer (at AppNavigator.js:36)
    in App (created by Connect(App))
    in Connect(App) (at index.ios.js:23)
    in Provider (at index.ios.js:22)
    in TheNewsApp (at renderApplication.js:32)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in AppContainer (at renderApplication.js:31)

This error is located at:
    in NavigationContainer (at AppNavigator.js:36)
    in App (created by Connect(App))
    in Connect(App) (at index.ios.js:23)
    in Provider (at index.ios.js:22)
    in TheNewsApp (at renderApplication.js:32)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in AppContainer (at renderApplication.js:31)
getState@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:79579:24
runComponentSelector@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:78896:56
initSelector@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:79019:28
Connect(SideBarApp)@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:78969:29
constructClassInstance@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:20826:32
updateClassComponent@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:22393:35
performUnitOfWork@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:24922:27
workLoop@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:24955:47
renderRoot@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:24988:21
performWorkOnRoot@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25549:23
performWork@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25481:30
performSyncWork@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25456:20
requestWork@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25362:26
scheduleWork@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25224:28
enqueueSetState@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:20681:23
setState@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:2380:37
dispatch@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:80901:27
navigate@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:80517:24
nav@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:80470:44
combination@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:79810:38
dispatch@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:79628:38
setLoginStatus@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:112247:19
http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:112199:44
tryCallOne@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8818:16
http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8919:27
_callTimer@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8162:17
_callImmediatesPass@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8198:19
callImmediates@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8417:33
__callImmediates@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7741:32
http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7580:34
__guard@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7721:15
flushedQueue@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7579:21
flushedQueue@[native code]
invokeCallbackAndReturnFlushedQueue@[native code]

Can you add a stack trace? This would help us give a more accurate answer. — Thai, Jul 24 '18 at 16:39
Would you please share a snippet of the code where you actually call `store.getState()`? — Sylvain, Jul 24 '18 at 22:01
It would be useful we could see what is going on at SceneView.js:9 and createTabNavigator.js:10 — Ben Smith, Jul 24 '18 at 23:07
both of those are not my code. I'm not sure what SceneView comes from, but createTabNavigator is from react-navigation https://github.com/react-navigation/react-navigation — bbrodsky, Jul 24 '18 at 23:25

Victor Le · Answer 1 · 2018-11-28T11:56:44.210

197

It's an issue with the new v2.16.0 release of redux-devtools-extension.

Here's a couple of workaround while we wait for the fix...

Revert back to the working version v2.15.5 (For Chrome)
- Download https://github.com/zalmoxisus/redux-devtools-extension/releases/download/2.15.5/extension.zip
- Extract the zip
- Type chrome://extensions into the url and toggle on developer mode on the top right of the page.
- The button Load Unpacked will appear. After clicking the button, select the extracted folder.
Or just simply disable your redux-devtool extension for now.
- either on the browser level or through your code(where you create the redux store)

FYI: this does not solve the OP's question but does solve the issue where developers are receiving the below error message starting 11/27/18.

Error: You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.

UPDATE

v2.16.2 has been released

For those who had previously disabled the extension, just re-enable it and Update your redux dev tools from 2.16.0 to 2.16.2 Update Redux Dev tools

edited Nov 28 '18 at 11:56

answered Nov 28 '18 at 04:19

Victor Le

1,758
3
17
25

9

Nice workaround for this problem which literally just popped up a hours ago for everyone using *redux-devtools-extension*, but doesn't really address OP's question which was asked way before this bugged v2.16.0 release...just saying – strider Nov 28 '18 at 05:43
1

@bitstrider Of course it doesn't addresses the OP's question. But it sure seem like it's helping a lot of people out with the current situation. For those who are wondering about the status of this issue, here's the [github issue](https://github.com/zalmoxisus/redux-devtools-extension/issues/588) that was posted for it. – Victor Le Nov 28 '18 at 05:51
3

saved me alot of headache this early morning – Abel Masila Nov 28 '18 at 06:26
1

spent almost an hour to find this issue. Reverted to v2.15.5. Things working fine now. – domino_katrino Nov 28 '18 at 07:08
2

Version 2.16.1 of redux-devtools-extension, which fixes this issue, has been released – Patrick Hund Nov 28 '18 at 10:56
Great shout. Started seeing this error all of a sudden for no apparent reason. Disabling redux dev tools fixes it. – spice Nov 28 '18 at 14:47
Confirming what Patrick mentions, that v2.16.1 fixes this issue. Just close and restart Chrome - the extension should auto update itself. All is well again in Redux Dev Tools world :) – spice Nov 28 '18 at 14:54
I have dissabled the redux-devtool extension, but still the error. What should i do now? – Md. Robi Ullah Jul 06 '20 at 06:50

score 24 · Answer 2 · answered Nov 28 '18 at 03:35

24

In my case, I have to remove composeWithDevTools - a plugin for chrome

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';

// const enhancer = composeWithDevTools(applyMiddleware(thunk))
const enhancer = applyMiddleware(thunk)

const store = createStore(reducers, enhancer);

answered Nov 28 '18 at 03:35

Cong Dan Luong

1,577
17
15

6

Thanks. This works for me. Disabling Redux Chrome Extension works as well. This only happens since today. wonder why... – Jacob Goh Nov 28 '18 at 04:06
2

Same here @JacobGoh , facing the same problem, never faced it before. Chrome webstore says the extension was updated on 27th November, maybe they broke something. – James Nov 28 '18 at 04:17
3

@JacobGoh https://github.com/zalmoxisus/redux-devtools-extension/issues/588 – Victor Le Nov 28 '18 at 04:51
@ImanMahmoudinasab - I am using Chrome version 55.x (though latest version is 70.x), still faced the same issue. After uninstalling Redux DevTools (v 2.16.0), my app is working fine as suggested by Viet Le. – domino_katrino Nov 28 '18 at 06:54

score 11 · Answer 3 · answered Nov 28 '18 at 04:20

11

In my project. This issue just popup from nowhere one day.

My solution: Disable the Chrome extension - Redux Devtools. Then everything is back to normal.

So with this kind of error, you should test in several browser to find the problem.

answered Nov 28 '18 at 04:20

Van Hoang Truong

111
1
3

score 6 · Answer 4 · answered Apr 16 '21 at 03:32

tl;dr

Make sure you don't have any code that causes side effects in your reducers!

Pure reducers

Redux reducers need to be pure. This means they shouldn't have side effects. Side effects should go to thunks or sagas. In my case a reducer looked like this:

case REDIRECT_ON_EVENT: {
  history.push('/some-route'); // side effect: redirection
  return {
    ...state,
    path: action.payload.path,
  };
}

The history.push('/some-route'); part messed up state management. Removing it from the reducer and placing it to a saga that gets called on the same action type fixed the issue:

function redirectToSomeRoute() {
  history.push('/some-route');
}

takeEvery(REDIRECT_ON_EVENT, redirectToSomeRoute),

Alqama Bin Sadiq · Answer 5 · 2018-11-28T06:08:51.350

Disabling chrome extension or removing composeWithDevTool from your code will work as a quick fix. But we all know that we need the extension in order to track our application state and manage it properly. So I created an issue today please support hopefully, someone from the redux team will get back to us.

Or if you are looking for a temporary workaround(for chrome), you can download https://github.com/zalmoxisus/redux-devtools-extension/releases/download/2.15.5/extension.zip and then extract it to some folder.

Type chrome://extensions and turn on developer mode from top left and then click on Load Unpacked and select the extracted folder for use.

Issue: https://github.com/reduxjs/redux-devtools/issues/413

Sultan Aslam · Answer 6 · 2018-11-28T11:13:17.187

5

Solution That work for me

Disable the Chrome extension of Redux Dev tools. or remove logger from your code.

update: Update your redux dev tools from 2.16.0 to 2.16.1 Update Redux Dev tools.

edited Nov 28 '18 at 11:13

answered Nov 28 '18 at 10:12

Sultan Aslam

5,600
2
38
44

score 3 · Answer 7 · answered Jul 16 '19 at 10:26

3

In my case the issue was not related to dev extension. I've encountered this error while working with deep-linking - was updating route query inside reducer. Wrapping logic related to manipulating url inside settimeout fixed the error.

answered Jul 16 '19 at 10:26

Be Kind

4,712
1
38
45

score 2 · Answer 8 · answered Nov 28 '18 at 03:41

I had the same error with a PWA build with polymer 3. The store.js also tried to use the redux dev tools which I had to deactivate:

...
// Sets up a Chrome extension for time travel debugging.
// See https://github.com/zalmoxisus/redux-devtools-extension for more information.
//const devCompose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const devCompose =  compose;

// Initializes the Redux store with a lazyReducerEnhancer (so that you can
// lazily add reducers after the store has been created) and redux-thunk (so
// that you can dispatch async actions). See the "Redux and state management"
// section of the wiki for more details:
// https://github.com/Polymer/pwa-starter-kit/wiki/4.-Redux-and-state-management
export const store = createStore(
  state => state,
  devCompose(
    lazyReducerEnhancer(combineReducers),
    applyMiddleware(thunk))
);
...

catphotos · Answer 9 · 2018-11-28T08:20:47.133

This is what I did: Just commented the line for Chrome Redux Devtools Extension from my store.js file.

....

 const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware)
   ///This line--> window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 
  )
);

....

And the issue is just begun an hour ago. As we all know the extension is very handy during development, so let us wait for the real fix from the authorities.

score 2 · Answer 10 · answered Nov 28 '18 at 10:37

2

Should be fixed now. Update your redux dev tools from 2.16.0 to 2.16.1

https://github.com/zalmoxisus/redux-devtools-extension/issues/588#issuecomment-442396540

answered Nov 28 '18 at 10:37

andrevenancio

494
4
19

2

It still happens for me on 2.17.0 – totymedli Feb 09 '21 at 12:43

score 1 · Answer 11 · answered Oct 07 '20 at 18:59

1

I had this problem on Chrome. Downgrading my version of redux from 4.0.2 to 3.7.2 fixed it for me.

npm uninstall redux

npm install redux@3.7.2

answered Oct 07 '20 at 18:59

Quintin Sheridan

31
4

score 1 · Answer 12 · answered Jun 15 '21 at 03:23

Note: I am using Saga

In my case I had added a navigation code inside a reducer.

    sendOTPSuccess: (state, action) => {
      state.wip = false;

      RootNavigation.navigate('LoginOTPScreen');
    },

In the beginning it was working but when I used/accessed state inside the called new Screen

import { useDispatch, useSelector } from "react-redux";
import * as sessionActions from "../../models/session";

const LoginOTP: () => Node = (props) => {
  const session = useSelector(sessionActions.selectSession);
  const dispatch = useDispatch();
  ...

the error popped up.

“Error: You may not call store.getState() while the reducer is executing.”

Cause

Reducer is supposed to be a pure function. It should accept a payload and modify state and nothing else. Something else is considered as a side-effect.

I my case I loaded a new component which also consumes state data and the state modification is not yet completed. This is causing the issue.

Solution

I simply moved the navigation to respective saga

// worker Saga:
function* sendOTPSaga({ payload }) {
  const { phoneNumber } = payload;
  try {
    const response = yield call(Api.sendOtp, { phoneNumber });
    if (response.status == 200) {
      yield put(sessionActions.sendOTPSuccess(response.data));
      RootNavigation.navigate('LoginOTPScreen'); // <---- Here
    ...