入门 Redux
Redux 是 JavaScript 应用的状态容器,提供可预测的状态管理。
可以帮助你开发出行为稳定可预测的、运行于不同的环境(客户端、服务器、原生应用)、易于测试的应用程序。不仅于此,它还提供超爽的开发体验,比如有一个
与时间旅行调试器相结合的实时代码编辑
。
可以将 Redux 与
React
或其他视图库一起使用。它体小精悍(只有2kB,包括依赖),却有很强大的插件扩展生态。
安装
Redux Toolkit
是我们官方推荐的编写 Redux 逻辑的方法。它围绕 Redux 核心,并包含我们认为对于构建 Redux 应用必不可少的软件包和功能。Redux Toolkit 建立在我们建议的最佳实践中,简化了大多数 Redux 任务,防止了常见错误,并使编写 Redux 应用程序更加容易。
RTK 包含了有助于简化许多常见场景的工具,包括
配置 Store
,
创建 reducer 并编写 immutable 更新逻辑
,
甚至还包含
一次性创建整个 State 的 “Slice”
。
无论你是一个想要开发第一个 Redux 应用的新手,还是想要简化已有应用经验老道的老手,
Redux Toolkit
都能帮你写出更好的 Redux 代码.
Redux Toolkit 提供 NPM 软件包,可与模块捆绑器或 Node 应用程序一起使用,安装方式如下:
npm install @reduxjs/toolkit
yarn add @reduxjs/toolkit
创建一个 React Redux 应用
官方推荐的使用 React 和 Redux 创建新应用的方式是使用
官方 Redux+JS 模版
或
Redux+TS 模板
,它基于
Create React App
,利用了
Redux Toolkit
和 Redux 与 React 组件的集成.
npx create-react-app my-app --template redux
npx create-react-app my-app --template redux-typescript
Redux 核心库
Redux 核心库同样有 NPM 软件包,可与模块捆绑器或 Node 应用程序一起使用,安装方式如下:
npm install redux
yarn add redux
还有一个使用方式是通过预编译的 UMD 包,定义了
window.Redux
这个全局变量。UMD 包可以通过
<script>
tag
直接使用。
想要获取更多信息,查看
安装
.
基础示例
应用的整体全局状态以对象树的方式存放于单个
store
。
唯一改变状态树(state tree)的方法是创建
action
,一个描述发生了什么的对象,并将其
dispatch
给 store。
要指定状态树如何响应 action 来进行更新,你可以编写纯
reducer
函数,这些函数根据旧 state 和 action 来计算新 state。
import { createStore } from 'redux'
function counterReducer(state = { value: 0 }, action) {
switch (action.type) {
case 'counter/incremented':
return { value: state.value + 1 }
case 'counter/decremented':
return { value: state.value - 1 }
default:
return state
}
}
let store = createStore(counterReducer)
store.subscribe(() => console.log(store.getState()))
store.dispatch({ type: 'counter/incremented' })
store.dispatch({ type: 'counter/incremented' })
store.dispatch({ type: 'counter/decremented' })
你需要使用
action
这个普通对象来描述发生了什么,而不是直接改变 state。然后,编写一个名为
reducer
的特殊函数,来决定如何基于 action 来更新整个应用的状态树。
在典型的 Redux 应用程序中,只有一个 store 以及一个根 reducer 函数。随着应用程序的增长,您可以将根 reducer 拆分为较小的 reducer,分别在状态树的不同部分上进行运行。这就像在 React 应用程序中只有一个根组件一样,但是它是由许多小组件组成的。
对于简单的计数器应用来说,这种架构看起来过度设计,但是这种模式的优点在于它可以很好地扩展到大型和复杂的应用程序。还可以基于此设计出功能非常强大的开发者工具,因为可以跟踪每个 action 以及状态变更。你可以记录用户会话并仅通过重播每个 action 来重现它们。
Redux Toolkit 简化了编写 Redux 逻辑和设置 store 的过程。 使用 Redux Toolkit,相同的逻辑如下所示:
import { createSlice, configureStore } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0
},
reducers: {
incremented: state => {
state.value += 1
},
decremented: state => {
state.value -= 1
}
}
})
export const { incremented, decremented } = counterSlice.actions
const store = configureStore({
reducer: counterSlice.reducer
})
store.subscribe(() => console.log(store.getState()))
store.dispatch(incremented())
store.dispatch(incremented())
store.dispatch(decremented())
Redux Toolkit 使我们可以编写更精短且更易于阅读的代码,同时仍然遵循同样的 Redux 规范和数据流。
学习 Redux
我们有多种资源可帮助您学习Redux。
Redux 基础教程
Redux 基础教程
是一个“自上而下”的教程,使用推荐的最新 API 和最佳实践来教“如何以正确的方式使用 Redux”。建议从这个教程开始。该教程从最初的原理开始,没有任何抽象地讲授“Redux 工作原理”,以及 Redux 标准规范存在背后的原因。
学习流行的 Redux 流
Redux 维护者 Mark Erikson 在“与 Jason 一起学习”节目中,解释了我们今天如何推荐使用 Redux。该节目用一个实时编码的示例应用程序,展示了如何用 Typescript 编写 Redux Toolkit 和 React-Redux hooks,以及新的 RTK Query 数据获取 API。
请参阅
the "Learn Modern Redux" show notes page
以获取脚本和示例应用程序源的链接。
附加教程
其他资源
帮助和讨论
Reactiflux Discord 社区
的
#redux channel
是有关学习和使用 Redux 所有问题的官方资源。Reactiflux 浏览、提问和学习的好地方 - 快来加入我们吧!
你也可以用在
#redux 标签
在
Stack Overflow
上提问。
如果你有 bug report 或者需要留下其他反馈,
请在 Github repo 上提出问题
你需要使用 Redux 吗?
虽然 Redux 是一个很有价值的管理状态工具,但还是要考虑下它是否适合你的场景。
不要仅仅因为有人说过应该使用 Redux 而使用 - 应该花一些时间来了解使用它的潜在好处和取舍
。
当遇到如下问题时,建议开始使用 Redux:
-
你有很多数据随时间而变化
-
你希望状态有一个唯一确定的来源(single source of truth)
-
你发现将所有状态放在顶层组件中管理已不可维护
有关如何使用Redux的更多想法,请参见: