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, 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",
}
});