当state等于initialState时，Reducer的工作机制是怎样的？

Hey there! Let's break down how this Redux reducer behaves when state is set to initialState—I'll walk through it step by step using your provided code snippet.

First, let's clarify what initialState does #

In Redux, the state = initialState syntax is a default parameter. When your store first initializes, no actions have been dispatched yet, so the reducer receives undefined as the state argument. That's when the default kicks in, and your state starts off as this array of three players:

const initialState = [
  { name: 'Jim Hoskins', score: 31, },
  { name: 'Andrew Chalkley', score: 20, },
  { name: 'Alena Holligan', score: 50, },
];

1. Handling the ADD_PLAYER action #

When an action with type PlayerActionTypes.ADD_PLAYER is dispatched (quick note: your code has a typo here—you wrapped the type in quotes, which won't match the imported constant; it should be case PlayerActionTypes.ADD_PLAYER: instead of case 'PlayerActionTypes.ADD_PLAYER':), here's what happens:

• The reducer uses the spread operator (...state) to create a copy of the current initialState array. This is critical in Redux: you never mutate the original state directly—always return a new state value.
• It appends a new player object to the end of this copied array, using action.name for the player's name and setting their initial score to 0.
• The final returned state looks like this:

  [
    { name: 'Jim Hoskins', score: 31 },
    { name: 'Andrew Chalkley', score: 20 },
    { name: 'Alena Holligan', score: 50 },
    { name: action.name, score: 0 }
  ]
  

2. Handling the REMOVE_PLAYER action #

Your code snippet cuts off here (looks like ...s... should be ...state.slice(action.index + 1)), but let's cover the intended logic:
When an action with type PlayerActionTypes.REMOVE_PLAYER comes in, the reducer:

• Uses state.slice(0, action.index) to copy all elements from initialState starting at index 0 up to (but not including) the index specified in action.index.
• Uses state.slice(action.index + 1) to copy all elements from initialState starting right after the target index to the end of the array.
• Merges these two copied arrays with the spread operator, effectively removing the player at action.index.
  For example, if action.index is 1, the returned state would be:

[
  { name: 'Jim Hoskins', score: 31 },
  { name: 'Alena Holligan', score: 50 }
]

3. What happens with unrecognized actions? #

Your current switch statement doesn't have a default branch—this is a common oversight! Redux requires that reducers return the current state when they receive an action they don't recognize. So you should add this to your code:

default:
  return state;

With this, if an action that's not ADD_PLAYER or REMOVE_PLAYER is dispatched, the reducer will just return the original initialState without making any changes.

Key takeaways #

• When the store initializes, the reducer falls back to initialState because no actions have been sent yet.
• For every action, the reducer creates a new state instead of modifying the original initialState—this preserves immutability, which is core to how Redux works.
• Each action type maps to a specific state update rule, and unhandled actions leave the state unchanged.

内容的提问来源于stack exchange，提问作者juanli