进阶开发者的 Redux 入门教程

前端

2024-02-15 23:17:39

Redux 简介

Redux 是一款专为 JavaScript 应用打造的状态管理工具，它深受开发者喜爱。通过采用单一数据源的方式，Redux 简化了 Flux 架构的繁琐 store，大幅降低了状态管理的复杂度。

与传统的状态管理方式相比，Redux 具有诸多优势：

清晰易懂： Redux 将应用的状态以单一数据源的形式集中管理，使代码逻辑更加清晰易懂，便于维护和理解。
易于测试： Redux 提供了清晰的 state 和 action 定义，简化了单元测试和集成测试的过程，使代码更易于测试。
适用于多种环境： Redux 不局限于前端开发，它同样适用于服务器端渲染、移动开发等多种场景，具有较强的通用性。

Redux 原理与基本概念

Redux 的核心思想是将应用的状态集中存储在一个名为 store 的对象中，然后通过 dispatch 函数来触发 action，对 store 中的数据进行修改。

Store： 存储应用状态的中心对象，Redux 中的所有状态都存储在 store 中。
Action： 如何修改 store 的对象，action 是一个包含 type 和 payload 的对象，type 用于标识要执行的操作，payload 则包含要更新的数据。
Reducer： 根据 action 来修改 store 中数据的纯函数，reducer 的作用是将 action 中包含的更新数据应用到 store 中。
Dispatch： 分发 action 的函数，当组件需要更新状态时，会通过 dispatch 函数触发 action，将 action 发送给 reducer 进行处理。

Redux 基本使用

1. 安装 Redux

首先，你需要在项目中安装 Redux 库，可以使用以下命令：

npm install redux

2. 创建 Store

接下来，你需要创建一个 store，store 是 Redux 中存储应用状态的中心对象。你可以使用 createStore 函数来创建 store：

import { createStore } from 'redux';

const store = createStore(reducer);

3. 创建 Action

为了修改 store 中的数据，你需要创建 action。action 是一个包含 type 和 payload 的对象，type 用于标识要执行的操作，payload 则包含要更新的数据。

const action = {
  type: 'ADD_TODO',
  payload: {
    text: 'Learn Redux',
    completed: false
  }
};

4. 分发 Action

使用 dispatch 函数可以将 action 发送给 store，从而触发 reducer 对 store 中的数据进行修改。

store.dispatch(action);

5. 创建 Reducer

reducer 是根据 action 来修改 store 中数据的纯函数，reducer 的作用是将 action 中包含的更新数据应用到 store 中。

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    default:
      return state;
  }
};