Pfthb

I always read that state in redux is and should be immutable, while logging store.getState() will return the state which may represent a modified data after dispatching a certain action.

This part is confusing to me, how we can consider state is immutable in this case, do state here refer to the original data or the initial data that passed as the first argument to the reducer??

const reducer = (state = , action) => 

Is the immutable state here the initial state which is an empty array or the data that dispatched after fetching???

I need some clarification about this confusing part???

The redux state itself is not immutable but it is composed from immutable data structures. Saying that state is immutable is not correct.

The whole point of a data structure being immutable is that you never mutate it. When speaking about arrays, mutating means adding, removing or setting values (e.g. push, shift, splice etc). Therefore, to change a value, you always have to create a new array (instead of mutating the existing array).

For example:

const reducer = (state = , action) => 
 const addedValue = action.payload.addedValue;
 return [...state, addedValue];

not

const reducer = (state = , action) => 
 const addedValue = action.payload.addedValue;
 state.push(addedValue);
 return state;

In this sense both the previous state and the new state (the returned value) are both immutable data structures.

To explain the concept of timewalking mentioned in comments, first we suppose there is some redux state in some variable:

let state = /* redux state */

Whenever an action is triggered, all reducers run recursively to create a new state. The whole concept in Redux is expressed by something like this:

let oldState = state;
state = reducers(oldState, action);

The concept of timewalking means that we do something like this:

const stateHistory = ;
stateHistory.push(state)
state = reducers(oldState, action);

This way our stateHistory variable contains the complete previous state. To timewalk, we can simply:

state = stateHistory[index];

and rerender.

However, this wouldn't work without immutable data structures. Immutable data structures ensure that all states in history are independent and mutating one won't affect the rest.

I always read that state in redux is and should be immutable, while
logging store.getState() will return the state which may represent a
modified data after dispatching a certain action.

This is true.

This part is confusing to me, how we can consider state is immutable
in this case, do state here refer to the original data or the initial
data that passed as the first argument to the reducer??

State as an argument of the reducer refers to the actual state. If it's the first time calling the reducer, then state will be initialized with the default value, in this case . This feature is called Default parameters.

Is the immutable state here the initial state which is an empty array
or the data that dispatched after fetching???

Redux requires to write reducers as pure functions so that the state modifications are handled exclusively by Redux.

For more information please refer to Reducer's documentation.