Redux 中存储的内容

Redux 是一个 JavaScript 状态管理库，它用于存储并管理应用程序中的所有数据。Redux 中存储的内容可以分为三个部分：state、action 和 reducer。

State

在 Redux 中，state 是一个单一的 JavaScript 对象，它包含着整个应用程序的状态。state 可以包含任何数据，例如用户数据、应用程序配置、应用程序主题等等。根据 Redux 的设计原则，state 是只读的，因此不能直接修改 state。

const initialState = {
  user: {
    name: 'John',
    age: 30,
    email: 'john@gmail.com'
  },
  theme: {
    primaryColor: 'blue',
    secondaryColor: 'green'
  }
};

Action

Action 是对 state 进行更改的唯一途径。Action 是一个包含“type”和“payload”属性的 JavaScript 对象。其中，“type”属性是字符串类型，用来描述进行的操作类型，如“ADD_USER”，“CHANGE_THEME”等等。而“payload”属性则是包含了要操作的数据的 JavaScript 对象，如要添加的用户数据、要更改的主题数据等等。

const addUser = {
  type: 'ADD_USER',
  payload: {
    name: 'Bob',
    age: 25,
    email: 'bob@gmail.com'
  }
};

const changeTheme = {
  type: 'CHANGE_THEME',
  payload: {
    primaryColor: 'red',
    secondaryColor: 'yellow'
  }
};

Reducer

Reducer 是处理 Action 的纯函数。它接受先前的 state 和 action，根据 action 的 type 和 payload 属性，返回一个新的 state。Reducer 必须是一个纯函数，意味着它不能更改传递给它的参数，也不能有任何副作用。Reducer 函数使用“switch”语句，根据操作类型来以行动相应的逻辑。

const userReducer = (state, action) => {
  switch(action.type) {
    case 'ADD_USER':
      return {
        ...state,
        user: action.payload
      };
    default:
      return state;
  }
};

const themeReducer = (state, action) => {
  switch(action.type) {
    case 'CHANGE_THEME':
      return {
        ...state,
        theme: action.payload
      };
    default:
      return state;
  }
};

在 Redux 中，state、action 和 reducer 之间的关系如下所示：

          ---Action-->
        |               |
  Reducer               State
        |               |
          <--New State--

当一个 Action 发生时，它会被传递到 Reducer 中，Reducer 会根据 Action 的类型和 payload 来计算并返回一个新的 State。新的 State 又会与旧的 State 对比，如果有变化，就将其传递给应用程序的 View 层，以便更新用户界面。

总结

Redux 在应用程序设计中扮演了重要的角色，它的作用是为应用程序提供一个单一的数据存储位置。通过使用 Redux，我们可以方便地管理和控制应用程序的状态，并在用户界面中反映这些变化。