How can I get my Redux useSelector to update on store change?

Question

I'm using the Redux Toolkit and I'm struggling to find a way to update state within my store that also triggers a reassignment for useSelector.

const slice = createSlice({
  name: "state",
  initialState: [],
  reducers: {
    addToArray: (state, action) => {
      state.push(action.payload); // This updates the store but doesn't respect immutability?
   }
 }
});

I'm aware the above isn't entirely correct, and that something like

state = [...state, ...action.payload]

would be better, BUT for some reason I couldn't get it work correctly any other way. I'm simply trying to add an object to the array.

My component:

export default function App() {
   const array = useSelector(selectArray);

   return (
     {array.map((x) => {
        <div>{x.text}</div>
     })
   )
}

The issue is, whenever the dispatch is called, array doesn't update, which I'd like it to.

Answer 1

I think your issue is the way you push the new value into the array. That is not immutable and it appears the selector is detecting that the array hasn't changed, so it returns the previous value.

Try this:

const slice = createSlice({
  name: "state",
  initialState: [],
  reducers: {
    addToArray: (state, action) => {
      state = [ ...state, action.payload ];
   }
 }
});

This demo should simulate what happens when mutably changing state vs immutably changing state.

const state = {
  list: [1]
}

const addItemMutable = (item) => {
  const prevState = { ...state }
  state.list.push(item)
  
  // Using JSON.stringify for better readability in output.
  console.log(JSON.stringify(prevState.list), JSON.stringify(state.list))
  console.log(prevState.list === state.list)
}

const addItemImmutable = (item) => {
  const prevState = { ...state }
  state.list = [ ...state.list, item ]

  // Using JSON.stringify for better readability in output.
  console.log(JSON.stringify(prevState.list), JSON.stringify(state.list))
  console.log(prevState.list === state.list)
}

addItemMutable(2)
addItemImmutable(3)