Redux Toolkit工具使用

Redux Toolkit是Redux官方推出的工具集，因为Redux编写过程中会写很多的样板代码，对开发者不太友好，因此官方推出Redux Toolkit，Redux Toolkit就是对Redux的二次封装，用于高效 Redux 开发，使 Redux 的使用变得简单，下面用 Redux Toolkit 实现 TodoList 案例

npm i @reduxjs/toolkit

目录结构

创建状态切片

对于状态切片，我们可以理解为就是 Reducer 和 Action 的集合体；在 Redux 中，原本 Reducer 函数和 Action 对象需要分别创建，现在通过状态切片替代，它会返回 Reducer 函数和 Action 对象

通过引入 createSlice 创建切片，给 createSlice 调用返回的 reducer 起一个别名 TodosReducer ，避免跟其他的 reducer 冲突

import {
    createSlice } from "@reduxjs/toolkit"
const {
    reducer: TodosReducer, actions } = createSlice()

配置状态切片

createSlice 定义 name 使用常量，后续 reducer 其他地方夜也会使用到常量，如需更改，只需更改常量的值，导出常量；initialState 初始状态值；reducers 就是一个个小的reducer集合，导出 reducer 跟 action
详细配置参考链接: https://redux-toolkit.js.org/api/createSlice.

export const TODOS_FEATURE_KEY = "todos"
const {
    reducer: TodosReducer, actions } = createSlice({
   
  name: TODOS_FEATURE_KEY,
  initialState: [],
  reducers: {
   
    addTodo: (state, action) => {
   
		state.push(action.payload)
	}
  }
})
export const {
    addTodo } = actions
export default TodosReducer

创建 store

在 index.js 文件中创建 store, 使用 configureStore 配置 store，配置项中的reducer 对象的作用就是合并 reducer ，对应 redux 中的 combineReducers；devTools 配置为布尔值，这里非生产环境使用，

import {
    configureStore} from "@reduxjs/toolkit"
import TodosReducer, {
    TODOS_FEATURE_KEY } from "./todos.slice"

export default configureStore({
   
  reducer: {
    // combineReducers
    [TODOS_FEATURE_KEY]: TodosReducer
  },
  devTools: process.env.NODE_ENV !== "production"
})

Action 预处理

Action 被触发后, 可以通过 prepare 方法对 Action 进行预处理，就是在触发 reducer 之前去处理 Action ，Reducer. prepare 方法必须返回对象，原来的 createSlice 的配置 reducers 对象中的 reducer 函数也要配置为对象

addTodo: {
   
    reducer: (state, action) => {
   
    	console.log(action)
		state.push(action.payload)
	},
    prepare: todo =>