营销网络是指公司在国内外寻找战略伙伴和同盟者优化网站搜索排名

一、什么是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;