第53节——Redux Toolkit初识

一、什么是Redux Toolkit

1、概念

Redux Toolkit是一个官方支持的、用于简化Redux开发的工具集。它提供了一些简单易用的API和工具，可以帮助开发者更快速、更高效地编写Redux应用。

2、主要功能

简化Redux的配置

Redux Toolkit提供了一个createSlice函数，可以用来快速创建Redux的action和reducer，不需要手动编写大量的模板代码。

封装常用的Redux函数

Redux Toolkit提供了一些封装过的Redux函数，如createAsyncThunk、createEntityAdapter等，这些函数可以帮助开发者更加容易地处理异步操作、管理实体数据等常见任务。

整合常用的中间件

Redux Toolkit默认集成了常用的中间件，如redux-thunk、redux-logger等，使得开发者可以更加便捷地使用这些中间件，而不需要手动配置。

提供默认的Redux store配置

Redux Toolkit提供了一个configureStore函数，可以用来快速创建一个Redux store，并且默认配置了许多常用的中间件和插件，减少了开发者的配置工作量。

总结

总的来说，Redux Toolkit可以帮助开发者更加高效地使用Redux，减少了许多样板代码和配置工作，同时提供了一些常用的功能和工具，使得开发者可以更加专注于业务逻辑的实现

二、安装

// 如果你已经安装了redux 和 react-redux，则不需要重复安装
npm install @reduxjs/toolkit

三、简单例子

实现数值加、减的功能

1、创建store.js文件

import { configureStore, createSlice } from '@reduxjs/toolkit';const counterSlice = createSlice({name: 'counter',initialState: { value: 0 },reducers: {increment: (state) => {state.value += 1;},decrement: (state) => {state.value -= 1;},},
});const store = configureStore({reducer: counterSlice.reducer,
});export default store;
export const { increment, decrement } = counterSlice.actions;

2、页面中使用

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./store";function App() {const count = useSelector((state) => state.value);const dispatch = useDispatch();return (<div><h1>Count: {count}</h1><button onClick={() => dispatch(increment())}>+</button><button onClick={() => dispatch(decrement())}>-</button></div>);
}export default App;