为什么 Redux Toolkit 是如今使用 Redux 的方式
什么是 Redux Toolkit?
Redux Toolkit (也称为 "RTK" ) 是我们官方推荐的编写 Redux 逻辑的方法。@reduxjs/toolkit 包封装了核心的 redux 包,包含我们认为构建 Redux 应用所必须的 API 方法和常用依赖。 Redux Toolkit 集成了我们建议的最佳实践,简化了大部分 Redux 任务,阻止了常见错误,并让编写 Redux 应用程序变得更容易。
如果今天你要写任何的 Redux 逻辑,你都应该使用 Redux Toolkit 来编写代码
RTK 包括一些实用程序,可以帮助简化许多常见的用例,包括 配置 Redux store、 创建 reducer 函数并使用不可变更新逻辑 和 一次性创建状态的某个"片段"(slice)。
无论你是刚接触 Redux 的新用户正在设计你的第一个项目,还是已有经验的用户想简化一个现有的应用,Redux Toolkit 都能够帮助你写出更好的 Redux 代码。
Redux Toolkit 与 Redux 核心包有什么区别
"Redux"是什么?
第一个需要问的问题是:"Redux 是什么?"
Redux 实际上是:
- 包含全局状态的单一仓库
- 当应用中发生某些事情时,分发普通对象(plain object) 动作(action)给仓库
- Pure reducer 函数查看这些动作(action)并且返回不可更新的状态。
虽然并非必须,你的 Redux 代码通常还包括:
- 创建动作对象的 action creator 函数
- 启用副作用(side effect)能力的中间件
- 包含有副作用的同步或异步逻辑的 thunk 函数
- 能够按照 ID 查找元素的标准化状态
- 使用 Reselect 库优化创建的选择器函数
- 使用 Redux DevTools Extension 来查看动作历史记录和修改状态
- 使用 TypeScript 给动作、状态和其他的函数进行类型定义
此外,Redux 通常与 React-Redux 库一起使用让 React 组件可以访问 Redux store。
Redux 核心包做了什么?
Redux 核心包是一个非常小、有意避免主观立场的库。它提供了一些小的 API 原语:
createStore实际创建一个 Redux 存储实例combineReducers将多个 reducer 函数合并成为一个更大的 reducerapplyMiddleware将多个中间件组合成一个 store 增强器compose将多个 store 增强器合并成一个单一的 store 增强器
除此以外,你应用中的所有其他与 Redux 相关的逻辑全需要你自己撰写。
好消息是,这意味着 Redux 能够以许多不同的方式使用。坏消息是,Redux 核心包不提供任何辅助函数来帮助你撰写任何代码。
例如,reducer 函数只不过是一个普通的函数。在 Redux Toolkit 之前,你通常会使用 switch 语句和手动更新 state 来编写 reducer。你通常还需要手写动作创建器函数和动作类型变量:
const ADD_TODO = 'ADD_TODO'
const TODO_TOGGLED = 'TODO_TOGGLED'
export const addTodo = text => ({
type: ADD_TODO,
payload: { text, id: nanoid() }
})
export const todoToggled = id => ({
type: TODO_TOGGLED,
payload: id
})
export const todosReducer = (state = [], action) => {
switch (action.type) {
case ADD_TODO:
return state.concat({
id: action.payload.id,
text: action.payload.text,
completed: false
})
case TODO_TOGGLED:
return state.map(todo => {
if (todo.id !== action.payload.id) return todo
return {