useSelector stopped firing all of a sudden

[ebitogu]

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React: ^17.0.2
• ReactDOM/React Native:
• Redux:^4.1.2
• React Redux:^7.2.6

What is the current behavior?

useSelector is no longer firing when actions are dispatched via useDispatch
const currentPageIndex = useSelector((state) => state.pageReducer[Constants.ReduxActions.CURRENT_PAGE] ?? defaultPage);

//CurrentPageIndex always returns 0 which is the default page even though dispatch has fired an action to change that.

What is the expected behavior?

I expect that when dispatch is called useSelector should pick up the latest changes.

Please note that this was all working perfectly until recently when I noticed that the useSelector hook is no longer firing.

Which browser and OS are affected by this issue?

All browsers

Did this work in previous versions of React Redux?

• Yes

[markerikson]

This almost always is an accidental mutation bug. Can you show the related reducer?

(as a side note, just reading that selector it looks like you're writing your code in a very verbose way that is unnecessary and not what we recommend. We specifically recommend not using the word "reducer" in your state slice names, and the Constants.ReduxActions.CURRENT_PAGE seems rather overdone as well.)

[ebitogu]

@markerikson I am not using the latest createSlices pattern yet. I am still using the combineReducers pattern as it still works perfectly fine for me.

Frankly speaking based on the tutorial I saw, the latest createSlice pattern requires too much code for a single reducer. Significantly increasing development time and not necessarily what I want.

I was able to fix my issue by spreading out the state object after each update like this

return { ...(state || {}) }; //This has solved my problem already. Thank you

[markerikson]

The word "slice reducer" has always applied, even before the existence of RTK. Also, combineReducers is how you set up the root state that contains all the slices of state, regardless of how you wrote each slice reducer. They work together.

Your "solution" there seems wrong and unnecessary. You shouldn't need to spread the existing state by itself every time. This suggests there is some other bug in your code that this change is masking.

Can you share the entire reducer file?

(and while it's a separate discussion, RTK and createSlice minimizes the amount of code you have to write, by generating action creators and eliminating the need to do immutable updates by hand with spread operators. It also completely eliminates any accidental mutations, which have always been by far the number 1 cause of bugs in Redux apps.)

[ebitogu]

@markerikson Thank you so much for your response. I was sincerely behind deadline and so I just did the above to get it working and move on. However, please below is how my Redux Flow is, please let me know if I am doing it wrong:

I have all my redux stuff in a folder called redux

Now within that redux folder I have a file called reducers.js that contains the following:

import { combineReducers } from "redux";
import Constants from "../../utils/constants";

const authReducer = (state, action) => {
    if (action.type === Constants.ReduxActions.AUTH_FLOW_PAGE_CHANGED) {
        state[Constants.ReduxActions.CURRENT_PAGE] = action.payload;
        if (action.hasOwnProperty('magic_link_email')) {
            state['magic_link_email'] = action.magic_link_email;
        }
    }
    return { ...(state || {}) };
};

const workSpaceReducer = (state, action) => {
    if (action.type === Constants.ReduxActions.WORK_SPACE_NAME_CHANGED) {
        state[Constants.ReduxActions.WORK_SPACE_NEW_NAME] = action.payload;
    } else if (action.type === Constants.ReduxActions.HOME_NAVIGATION_LIST_ITEM_CHANGE) {
        state[Constants.ReduxActions.NEW_NAVIGATION_ITEM] = action.payload;
    }
    return { ...(state || {}) };
}

const platformReducer = (state, action) => {
    if (action.type === Constants.ReduxActions.PLATFORM_CHANGED) {
        state[Constants.ReduxActions.CHANGED_PLATFORM_DATA] = action.payload;
    }
    return { ...(state || {}) };
}

const targetPlatformsReducer = (state, action) => {
    if (action.type === Constants.ReduxActions.TARGET_PLATFORMS_CHANGED) {
        state[Constants.ReduxActions.TARGET_PLATFORMS_DATA] = action.payload;
    }
    return { ...(state || {}) };
}

const postReducer = (state, action) => {
    if (action.type === Constants.ReduxActions.POST_CONTENT_CHANGED
        || action.type === Constants.ReduxActions.POST_PUBLISHED_EVENT) {
        state = Object.assign({}, state, action.payload);
    }
    return { ...(state || {}) };
}

const rootReducer = combineReducers({
    authReducer, workSpaceReducer, platformReducer,
    targetPlatformsReducer, postReducer
});

export default rootReducer;

I have my store setup in a store.js file and includes the below:

import MonitorReducerEnhancer from "../reducers/monitor_reducer";
import { applyMiddleware, compose, createStore } from "redux";
import loggerMiddleware from '../middleware/logger';
import thunkMiddleware from 'redux-thunk'
import rootReducer from "../reducers/root_reducer";

export default function ConfigureStore(preloadedState = {}) {
    const middleWares = [loggerMiddleware, thunkMiddleware]
    const middlewareEnhancer = applyMiddleware(...middleWares)
    const enhancers = [middlewareEnhancer, MonitorReducerEnhancer]
    const composedEnhancers = compose(...enhancers)
    return createStore(rootReducer, preloadedState, composedEnhancers)
}

Then in my index.js file I called the store:

import ConfigureStore from './redux/store/configure_store';

const store = ConfigureStore();

function startApp() {
  ReactDOM.render(
    <React.StrictMode>
      <Provider store={store}>
        <AppLoader />
      </Provider>
    </React.StrictMode>,
    document.getElementById('root')
  );
}

Then on the click of a button within a component I dispatched an event to one of the reducers like this

const handleManualLogIn = (page) => {
        dispatch({
            type: Constants.ReduxActions.AUTH_FLOW_PAGE_CHANGED,
            payload: page
        });
    }

Then in another component, I tried listening for the state of the changed page like this
const currentPageIndex = useSelector((state) => state.authReducer[Constants.ReduxActions.CURRENT_PAGE] ?? defaultPage);
Yet the above line currentPageIndex was always returning zero until I spread out the state with return { ...(state || {}) };

Maybe I'm messing it all up, kindly point me in the direction if the above pattern is wrong.

Thank you once again.

[markerikson]

Sure.

So as I mentioned earlier, the first suggestion I have to is to switch to using our official Redux Toolkit package for writing all this logic, because it will shrink all that code to like 1/4 its current size :) I'll also say that even for "hand-written" Redux logic, the examples you're showing there are extremely verbose - a bunch of extra constants as enums, using action.hasOwnProperty(), doing bracket notation lookups instead of dot notation, etc. It's your code, so you can write it however you want to, but I truly see no benefit in writing the code that way at all.

The next issue is your reducers are mutating the existing state, and that is the cause of your UI rendering problems. This reducer in particular is mutating:

const workSpaceReducer = (state, action) => {
    if (action.type === Constants.ReduxActions.WORK_SPACE_NAME_CHANGED) {
        state[Constants.ReduxActions.WORK_SPACE_NEW_NAME] = action.payload;
    } else if (action.type === Constants.ReduxActions.HOME_NAVIGATION_LIST_ITEM_CHANGE) {
        state[Constants.ReduxActions.NEW_NAVIGATION_ITEM] = action.payload;
    }
    return { ...(state || {}) };
}

state[someField] = is a mutation. It doesn't matter that you made a copy later, you mutated the original state.

If you were to replace these reducers with Redux Toolkit's createSlice, you would:

• eliminate all these extra unnecessary Constants.ReduxActions definitions and usages
• shrink the size of the code
• completely eliminate accidental mutations
• avoid the need for the hacky and unneeded return {...state} lines

For example:

const workspaceSlice = createSlice({
  name: 'workspace',
  initialState: {},
  reducers: {
    workspaceNameChanged(state, action) {
      // This is safe to do inside of createSlice, because Immer makes this a real immutable update!
      state.name = action.payload;
    }
  }
})

For that matter, your store setup can be shrunk down to:

const store = configureStore({
  reducer: {
    auth: authReducer,
    workspace: workspaceReducer,
    // etc
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(logger),
  enhancers: (existingEnhancers) => existingEnhancers.concat(monitorEnhancer)
})

Oh, btw, what is that monitorEnhancer doing? I'm not familiar with that.

Finally, as an additional style note, we recommend not using the word "reducer" in your state slice key names

I'd strongly recommend taking the time to read through the tutorials and guides in the Redux docs, which show you our recommended patterns and practices for using Redux:

• https://redux.js.org/tutorials/index
• https://redux.js.org/tutorials/essentials/part-1-overview-concepts
• https://redux.js.org/tutorials/fundamentals/part-8-modern-redux
• https://redux.js.org/style-guide/style-guide

[ebitogu]

I see. Thank you so much. I'll make the changes right away.