redux-toolkit基础

redux
redux-thunk 异步编程处理 action
react-redux 将redux和react关联使用

redux/tookit

由于redux写法以及模块化过于复杂官方推荐使用reduxjs/tookit

Redux Toolkit 是 Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式，我们强烈建议你使用它。

它包括几个实用程序功能，这些功能可以简化最常见场景下的 Redux 开发，包括配置 store、定义 reducer，不可变的更新逻辑、甚至可以立即创建整个状态的 “切片 slice”，而无需手动编写任何 action creator 或者 action type。它还自带了一些最常用的 Redux 插件，例如用于异步逻辑 Redux Thunk，用于编写选择器 selector 的函数 Reselect ，你都可以立刻使用。

安装

@reduxjs/toolkit
cnpm i --save-dev @reduxjs/toolkit redux
"@reduxjs/toolkit": "^1.9.3",
"redux": "^4.2.1",

tookit内置API

1. 1.configureStore()：封装了createStore，简化配置项，提供一些现成的默认配置项。它可以自动组合 slice 的 reducer，可以添加任何 Redux 中间件，默认情况下包含 redux-thunk，并开启了 Redux DevTools 扩展。
2. 2.createSlice() 接收一组 reducer 函数的对象，一个 slice 切片名和初始状态 initial state，并自动生成具有相应 action creator 和 action type 的 slice reducer。

创建store文件写法
//创建唯一store对象
import { configureStore } from "@reduxjs/toolkit";

//configureStore 参数为配置
const store = configureStore({
//放置单独reducer切片 默认多合一
reducer: {},
//开启调试器
devTools: true,
});

export default store;

和之前的store一致

store默认报错

reducer合并下没有其他reducer。

使用createSlice创建slice切片
//用户reducer slice
//引入api创建slice切片
import { createSlice } from "@reduxjs/toolkit";

//创建reducerslice
const userReducerSlice = createSlice({
name: "User", // reducer命名
//该 slice的状态值
initialState: {
token: null,
},
//类似事件类型 action触发的动作
reducers: {
//state状态 action 动作
SAVE_TOKEN(state, action) {},
},
});

//导出当前切片的相关action
export const { SAVE_TOKEN } = userReducerSlice.actions;

//导出该切片reducer
export const userReducer = userReducerSlice.reducer;

这里位置，store独立的，需要和react项目关联。需要使用react-redux关联

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
//引入store
import store from "./store/index";
import { Provider } from "react-redux";

ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);

在组件中触发action需要使用useDispatch触发

//导出当前切片的相关action
export const { SAVE_TOKEN } = userReducerSlice.actions;

//导出action动作需要按照函数格式调用
//触发
dispatch(SAVE_TOKEN(1));