Redux state isn't being updated across the app in development

Question

I'm having a very weird issue with redux. In my current app, I decided to use a logout pattern suggested by Dan Abramov.

Basically, it looks like this:

const withLogout = (state, action) => {
  if (action.type === UserActions.logout.toString()) {
    state = undefined
  }
  return rootReducer(state, action)
}

The state is getting purged after the logout action is dispatched. I added logs to reducers and they all show that the state is getting reset to a default value. React Native Debugger shows the same thing.

However, the state inside the connect(react-redux) functions doesn't change. Even weirder, it looks like the function detects the fact that the state has changed because the logger function in mapState is being triggered. But the logger's output shows that the state hasn't changed there. Components are also not getting updated.

And as I mentioned in the title this issue happens only in dev mode. As soon as I build the app and install it everything starts working as intended. And it isn't caused by Debugger.

Any thoughts?

score 0 · Accepted Answer · answered Jun 06 '20 at 08:31

I found the reason. I had to import the store in a couple of places where I couldn't use react-redux to dispatch the action. This led to require cycles which sometimes led to creating multiple instances of the store.

I stumbled upon the following solution that makes sure you're using the same instance of the store across the app: instead of importing store in several places use the following pattern:

    // somewhere in the code
    let store
    export const setStore = storeInstance => store = storeInstance 
    ...
    store.dispatch()

    // store index.js
    import { setStore } from 'someplace'
    ...
    setStore(store)

Redux state isn't being updated across the app in development

1 Answers1