一、什么是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,减少了许多样板代码和配置工作,同时提供了一些常用的功能和工具,使得开发者可以更加专注于业务逻辑的实现
二、安装
shell
// 如果你已经安装了redux 和 react-redux,则不需要重复安装
npm install @reduxjs/toolkit
三、简单例子
实现数值加、减的功能
1、创建store.js文件
jsx
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、页面中使用
jsx
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;