Is it possible to change state without dispatch in useReducer?

Question

I found the state.elements was changed in console, even I do not dispatch yet. What is the reason?

const initialState = { elements: [['apple','banana'],['rabbit','cat']] };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = React.useReducer(reducer, initialState);
    
  const changeList=()=>{
    const elementsArray = Array.from(state.elements);
    elementsArray[0][0]='Tiger'
  }

  return (
    <>
      Count: {state.elements}
      <button onClick={changeList}>Change List without dispatch</button>
    </>
  );
}

Yes, `elementsArray[0][0]='Tiger'` is a state mutation. You should dispatch an action to the `useReducer` hook to update *that* element in state. This seems like a very contrived code example, but what are you really trying to do? Or is your post really as simple as a YES|NO if it's possible to mutate state? — Drew Reese, Dec 30 '21 at 07:34
I made my complicated code simple for posting stackflow. I pressed button several times without dispatch and I saw the elements was changed even I didn't dispatch and also it rendered on screen. — JIng Pak, Dec 30 '21 at 07:41
This is original code in my github. https://github.com/piaojing/react-zero/commit/f9f6fff18526615923e9adf6b1d95ac5bfc0384d — JIng Pak, Dec 30 '21 at 07:50

Drew Reese · Accepted Answer · 2021-12-30T07:58:07.607

Yes, it is possible to change state without dispatch in useReducer.

Like any state in React, it can be mutated. The useReducer state is no exception.

const changeList=()=>{
  const elementsArray = Array.from(state.elements);
  elementsArray[0][0] = 'Tiger'; // <-- state mutation
}

Array copy by reference, so even though elementsArray is a copy of the state.elements array, the array elements are still references to the original elements still in state.elements. Setting elementsArray[0][0] to the value "Tiger" has the same effect as state.elements[0][0] being set to "Tiger".

Mutations in React a huge no-no, an anti-pattern. You especially don't mutate state or props. State and props are to be treated as immutable objects. This is why state updates always require new object references to be created.

An immutable update example:

Here you shallow copy each level of depth of state that is being updated. The Spread syntax for shallow copying object properties, and Array.prototype.map to shallow copy array elements into a new array.

function reducer(state, action) {
  switch (action.type) {
    case "update_animal":
      const { index1, index2, value } = action.payload;
      return {
        ...state,
        elements: state.elements.map((outerEl, indexOuter) => 
          indexOuter === index1
            ? outerEl.map((innerEl, indexInner) => 
              indexInner === index2 ? value : innerEl
            )
            : outerEl
        )
      };

    ... other cases ...

    default:
      return state;
  }
}

...

dispatch({
  type: "update_animal",
  payload: {
    index1: 0,
    index2: 0,
    value: "Tiger",
  }
});

Is it possible to change state without dispatch in useReducer?

1 Answers1