Redux 是一个用于可预测和可维护的全局状态管理的 JS 库。它可以帮助你编写行为一致、在不同环境(客户端、服务器和原生)中运行并且易于测试的应用。

可以将 Redux 与 React 或任何其他视图库一起使用。它很小(2kB,包括依赖),但拥有一个庞大的可用插件生态系统。

Redux 工具包 是官方推荐的编写 Redux 逻辑的方法。它围绕 Redux 核心,并包含构建 Redux 应用所必需的包和函数。Redux Toolkit 构建了最佳实践,简化了大多数 Redux 任务,防止常见错误,并使编写 Redux 应用变得更加容易。

RTK 包含有助于简化许多常见用例的实用程序,包括 存储设置、创建 reducer 并编写不可变的更新逻辑 甚至 立即创建整个 “切片” 状态。无论你是设置第一个项目的全新 Redux 用户,还是想要简化现有应用的经验丰富的用户,Redux 工具包 都可以帮助你改进 Redux 代码。

安装

Redux Toolkit

Redux Toolkit 包括 Redux 核心,以及我们认为构建 Redux 应用必不可少的其他关键包(例如 Redux Thunk 和 Reselect)。

Redux Toolkit 在 NPM 上作为包提供,可与模块打包器或 Node 应用一起使用:

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

配套包

React-Redux

很可能需要 react-redux 用于 React 的绑定

npm install react-redux
Redux DevTools 扩展

Redux Toolkit 的 configureStore 自动设置与 Redux 开发工具 的集成。需要安装浏览器扩展来查看存储状态和操作:

Redux DevTools 扩展:

如果使用 React,还需要 React DevTools 扩展,React 开发工具扩展:

创建 React Redux 应用

使用 React 和 Redux 启动新应用的推荐方法是使用 Vite 官方 Redux+TS 模板,或使用 Next 的 with-redux 模板 创建新的 Next.js 项目。

这两个工具都已经为该构建工具适当配置了 Redux Toolkit 和 React-Redux,并附带了一个小示例应用,演示如何使用 Redux Toolkit 的多个功能。

# Vite 使用Redux+TS模板
# (使用 degit 工具克隆并提取模板)
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

# Next.js 使用 with-redux 模板
npx create-next-app --example with-redux my-app

官方推荐的使用 React 和 Redux 创建新应用的方式是使用 官方 Redux+JS 模版或 Redux+TS 模板,它基于 Create React App,利用了 Redux Toolkit 和 Redux 与 React 组件的集成。

# Redux + Plain JS 模板
npx create-react-app my-app --template redux

# Redux + TypeScript 模板
npx create-react-app my-app --template redux-typescript

目前没有官方的 React Native 模板,但建议将这些模板用于标准 React Native 和 Expo:

  • https://github.com/rahsheen/react-native-template-redux-typescript
  • https://github.com/rahsheen/expo-template-redux-typescript

Redux 核心

自行安装 redux 核心包:

# NPM
npm install redux

# Yarn
yarn add redux

如果不使用打包程序,则可以 访问 unpkg 上的这些文件、下载它们或将包管理器指向它们。

Logo

openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目,面向数字基础设施四大核心场景(服务器、云计算、边缘计算、嵌入式),全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构

更多推荐