# Help! My Redux Store is Updating but my App isn't Changing! - A Troubleshooting Guide

## Double Check
- Are you seeing the action dispatched in your console, and/or is the action type being displayed in the history in Redux dev tools?
- If the action is supposed to have a payload, does it?
- Is that payload being correctly processed by your store? Within the switch case that holds the type for that action, what's happening? What are the values of the relevant variables before you return your new state?
- Are those changes being correctly reflected in your Redux dev tools?

## Referential Check
- Are you copying your state at all levels such that it's never referentially equal to your previous state?
- Let's say you have some slice that you pull out with

        useSelector(state => state.someTopSlice.someSubSlice)

- Inside the reducer which controls `someTopSlice`, you should have a case dedicated to some particular kind of update for `someSubSlice`.
- In that case block, you need to ensure that you are not only copying `someTopSlice`, but that you are also copying `someSubSlice` to break the referential equality from your previous state. i.e.

        case UPDATE_SUB_SLICE:
            return {
                ...state,
                someSubSlice: {
                    ...state.someSubSlice,
                    updatedPortion: action.payload
                }
            }

- In the example above, not only are we spreading/copying our old `someTopSlice`, referenced here as `state`. We are also spreading/copying our old `someTopSlice.someSubSlice` and replacing the single, deeper sup property on it which needs to be replaced. If your `action.payload` is shaped such that it's designed to completely replace `someSubSlice`, that's perfectly fine. Instead of assigning `someSubSlice` to a copy of its old self, you could assign it directly to that complete replacement:

        return {
            ...state,
            someSubSlice: action.payload
        }

- An example which wouldn't work is something like this:

        newState = { ...state };
        newState.someSubSlice.updatedPortion = action.payload;
        return newState

- Here, we have copied our previous state, but the `...` operator only creates a *shallow copy* of the object. Any sub properties on this object, if they are mutable values such as objects, arrays, or sets, will maintain reference and continue to be `===` equal to their previous selves. This is the only comparison `useSelector` makes, and if this comparison returns `true` the component will not re-render.
- To be clear, this has nothing to do with the *method* of copying; a working example with an explicit `newState` would look like this:

        newState = { ...state };
        newState.someSubSlice = {
            ...newState.someSubSlice,
            updatedPortion: action.payload
        };
        return newState

- What's important is that every non-primitive or mutable value *also* be copied or entirely replaced in addition to your top level state. This will ensure that the `useSelector` comparison function correctly returns `false` when necessary.

## Precision Check
- Are you pulling the relevant value out of `useSelector` with sufficient precision?
- In our above check, we're taking an arbitrarily named slice of state, `someTopSlice`, which has a sub property on it called `someSubSlice`. If I wanted to reference `someSubSlice` in my app, I should be pulling it out of my state something like this:

        const updatedPortion = useSelector(state => state.someTopSlice.someSubSlice.updatedPortion);

- This is critically different from

        const { updatedPortion } = useSelector(state => state.someTopSlice.someSubSlice);
        // or
        const someSubSlice = useSelector(state => state.someTopSlice.someSubSlice);
        const updatedPortion = someSubSlice.updatedPortion;

where `useSelector` cannot see changes in `updatedPortion` because `useSelector` does not know that `updatedPortion` exists. Theoretically, if you are correctly copying `someTopSlice` and `someSubSlice` every time, a re-render would still happen here, but praxis says you should key into your sub states as far as you can go without getting reference errors. If you ARE getting an error for `cannot read property updatedPortion of undefined`, then that value should already get entirely replaced on every successful dispatch, and you shouldn't have any issues getting changes to display.