Coursera 笔记

Module 03 · In-depth Understanding of Advanced React Functionality深入理解 React 高级功能

Introduction to Redux ToolkitRedux 工具包概述

Coursera ↗

欢迎观看本视频！观看完后，您将能够：

  • 定义 Redux Toolkit 在 React 中的作用
  • 描述 Redux Toolkit 提供的工具，以简化 Redux 任务
  • 解释 Redux Toolkit 的架构
  • 说明 slice 与 store 之间的关系

Redux Toolkit 介绍

在 React 中，Redux Toolkit（RTK）是 Redux 团队提供的官方包，旨在简化 Redux 的开发过程，并提高开发效率。它包括一些工具，帮助简化常见的 Redux 任务，减少冗余代码，并加速开发。

Redux Toolkit 提供的功能：

  1. configureStore：用于将 Redux 配置逻辑整合成一个函数调用，简化 Redux store 的创建，包括设置常用的中间件，如 Redux Thunk 和启用 Redux DevTools 扩展调试功能。
  2. createSlice：允许开发者定义 slice reducers，自动处理不可变状态更新，使编写 reducer 逻辑变得更简单，无需直接修改状态。

通过 Redux Toolkit，您可以大幅减少设置 Redux 时所需的冗余代码，进而让代码更简洁、更高效，特别是在大型应用中，状态管理变得更加清晰和易于维护。

Redux Toolkit 组件

Redux Toolkit 中的主要组件包括 Store、Slices、Reducers 和 Actions。

安装步骤

  1. 通过 npm 或 yarn 安装 Redux Toolkit
    你可以使用以下命令来安装 Redux Toolkit：
npm install @reduxjs/toolkit

或者使用 yarn：

yarn add @reduxjs/toolkit
  1. 确保 React Redux 已安装
    在你的应用中，确保已经安装了 react-redux：
npm install react-redux

或者使用 yarn：

yarn add react-redux

Redux Toolkit 的核心概念

  1. Slice 文件
    Redux Toolkit 中至少包含一个 slice 文件 和一个 store 文件。
  • Slice 代表应用状态的一部分及其更新逻辑。
  • Slice 通常使用 Redux Toolkit 提供的 createSlice 函数来定义。
  1. Slice 的组成部分
  • Reducer：一个接收当前状态和 action 的函数，并基于该 action 返回新的状态。
  • Action Creators：自动生成的函数，用于创建 action。
  • Initial State：初始状态值。
  • Store：保存应用的完整状态树。
  • Slice：代表应用状态的一个片段，包含该片段的 reducer、action creators 和 初始状态。
  • Reducer：处理状态更新的纯函数。
  • Action Creators：用于生成并派发 action 的函数。
  • Initial State：slice 状态的初始值。

Slice 和 Store 关系

Store和Slice的关系

  1. Slices 定义了应用程序状态的不同部分及其更新逻辑。
  2. Store 是所有 slice 的集合，形成完整的状态树。创建 Store 时，通过 configureStore 函数将所有 slice reducer 合并在一起。

每个 slice reducer 会被添加到 Redux Store，当 dispatch 一个 action 时，Store 会根据 action 类型将其传递给对应的 slice reducer。

例子：电子商务应用中的 Slice 和 Store

假设您有一个电子商务应用程序，其中涉及商品数量的增加、总账单金额的计算和购买时获得的积分。应用程序的结构可能如下：

  • App.jsx：父组件
  • ProductQuantity.jsx：控制商品数量的增加与减少
  • CartValue.jsx：计算总金额
  • CounterSlice.jsx：定义 reducer 和相关的 action creators
  • Store.jsx：配置 Redux Store
  • Main.jsx：应用入口

各个组件的功能：

  1. ProductQuantity.jsx：显示商品数量，允许用户增加或减少商品数量。它通过 useDispatch 和 useSelector 钩子与 Redux Store 交互。

  2. CartValue.jsx：计算并显示总账单金额。它通过 useSelector 获取商品数量，从 Redux Store 计算最终金额。
  3. CounterSlice.jsx：定义名为 counter 的 slice。初始化计数器状态为零，定义 increment 和 decrement 两个 reducer，用于更新计数器状态。
  4. Store.jsx：通过 configureStore 函数配置 Redux store，将 counterReducer 添加到 store 中。
  5. Main.jsx：应用的入口，使用 React Redux 的 Provider 组件 将 Redux store 传递给应用程序。

Redux Toolkit 操作流程

  1. 创建 Store：使用 configureStore 配置并创建 Redux Store。
  2. 创建 Slice：使用 createSlice 定义切片，每个切片包括一个 reducer 和相关的 action creators。
  3. 派发 Action：在组件中使用 dispatch 来派发 action，更新 Redux Store 中的状态。
  4. 获取状态：组件通过 useSelector 钩子获取 Redux Store 中的状态。

总结

在本视频中，您学习了以下内容：

  • 在 React 中，Redux Toolkit（RTK）是 Redux 团队提供的官方包，旨在简化 Redux 开发。
  • Redux Toolkit 提供的工具包括 configureStore 和 createSlice，它们帮助简化 Redux 设置和状态更新。
  • Slice 在 Redux Toolkit 中代表应用程序状态的一个片段，并包含其更新逻辑。
  • Store 是应用的状态源，存储所有 slice 的状态。