一、什么是Redux Toolkit

1、概念

Redux Toolkit是一個官方支持的、用于簡化Redux開發(fā)的工具集。它提供了一些簡單易用的API和工具，可以幫助開發(fā)者更快速、更高效地編寫Redux應用。

2、主要功能

簡化Redux的配置

Redux Toolkit提供了一個createSlice函數(shù)，可以用來快速創(chuàng)建Redux的action和reducer，不需要手動編寫大量的模板代碼。

封裝常用的Redux函數(shù)

Redux Toolkit提供了一些封裝過的Redux函數(shù)，如createAsyncThunk、createEntityAdapter等，這些函數(shù)可以幫助開發(fā)者更加容易地處理異步操作、管理實體數(shù)據(jù)等常見任務。

整合常用的中間件

Redux Toolkit默認集成了常用的中間件，如redux-thunk、redux-logger等，使得開發(fā)者可以更加便捷地使用這些中間件，而不需要手動配置。

提供默認的Redux store配置

Redux Toolkit提供了一個configureStore函數(shù)，可以用來快速創(chuàng)建一個Redux store，并且默認配置了許多常用的中間件和插件，減少了開發(fā)者的配置工作量。

總結(jié)

總的來說，Redux Toolkit可以幫助開發(fā)者更加高效地使用Redux，減少了許多樣板代碼和配置工作，同時提供了一些常用的功能和工具，使得開發(fā)者可以更加專注于業(yè)務邏輯的實現(xiàn)

二、安裝

// 如果你已經(jīng)安裝了redux 和 react-redux，則不需要重復安裝
npm install @reduxjs/toolkit

三、簡單例子

實現(xiàn)數(shù)值加、減的功能

1、創(chuàng)建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;