为什么 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 {