尽管我改变了 state，但 Redux 减速器不会强制我的 React 组件重新渲染

Question

I have been struggling with redux lately because it often does not let my React Components rerender. I know that I have to mutate the state in order to let redux know that my state changed. But for some reason, my Redux still doesn't trigger the componentDidUpdate() function on my React Component. Here is the code for my reducer function:

case ADD_OR_UPDATE_EVENT_OF_MATCH: {
            const matches = [...state.matches];
            const foundMatch = matches.find((match) => match.matchId === action.matchId);
            const foundMatchIndex = matches.findIndex((match) => match.matchId === action.matchId);
            if (!foundMatch) return state;


            if (foundMatch.events) {
                const foundEventIndex = foundMatch.events?.findIndex((event) => event.eventId === action.event.eventId);
                if (foundEventIndex === -1) {
                    foundMatch.events?.push(action.event);
                } else {
                    foundMatch.events[foundEventIndex] = action.event;
                }

            } else {
                foundMatch.events = [action.event];
            }

            matches[foundMatchIndex] = foundMatch;
            if (state.currentMatch) {
                if (foundMatch.matchId === state.currentMatch.matchId) {
                    return {
                        ...state,
                        currentMatch: foundMatch,
                        matches: matches
                    };
                } else {
                    return {
                        ...state,
                        matches: matches
                    };
                }
            }

            return state;
        }

Answer 1

I'm afraid this statement is very wrong:

I know that I have to mutate the state in order to let redux know that my state changed.

The exact opposite is true. You should never actually mutate Redux state!

Lines like this are mutating, and are therefore breaking your app:

foundMatch.events[foundEventIndex] = action.event;

You need to change this logic to all be immutable updates , instead.

You should also probably look at using our official Redux Toolkit package to write your Redux logic, as it does allow you to write "mutating" logic in reducers that gets turned into safe and correct immutable updates internally.