react的状态管理工具redux-toolkit（内置thunk插件）

redux-toolkit简称RTK，RTK是redux简化版的工具包，它可以帮我们进行对数据的操作和管理。

1.安装redux和redux-toolkit

npm i @reduxjs/toolkit react-redux -s

2.创建1个rtk文件，在里面在创建1个store.js文件和reducers文件夹（存放）每个数据模块的状态

3.在reducers文件夹创建1个dataSlice.js文件并开始使用rtk

4.导入rtk相关api

import { createSlice , createAsyncThunk  } from "@reduxjs/toolkit";

import { getDataApi } from "../../utils/api";          //导入相关后台数据的api

5.定义rtk初始状态initialState并暴露出来

export const initialState = {

data：'value'

}  

6.创建数据的模块切片createSlice并暴露出来

export const dataSlice = createSlice({

    name:'dataSlice',                         //数据模块的命名空间

    initialState:initialState,                //数据的初始状态

    reducers:{                                   //改变状态的同步方法

        dataAdd(state,{payload}){

            state.data+=payload

        },

    },

    extraReducers:(builder)=>{                //改变状态的异步方法

        builder.addCase(getData.fulfilled,(state,{payload})=>{

            state.data = payload

        })

    }

})

export const dataSelector = (state:any) => state.MyData.data  ;   //初始数据暴露出来

export const {dataAdd} = dataSlice.actions                      //同步方法暴露出来

export const getData = createAsyncThunk('dataSlice/getData',async (payload)=>{

    let res = await getDataApi(payload)

    return res.data;

})                                                                                //异步方法暴露出来

export default dataSlice.reducer;                                //将仓库暴露

7.在store.js文件中配置store并导入dataSlice并进行数据持久化

首先安装持久化插件

npm i redux-persist -s 

然后导入

import { configureStore , combineReducers  } from "@reduxjs/toolkit";

import dataSlice from "./reducers/dataSlice";

import { persistStore,persistReducer} from 'redux-persist'

import storage from 'redux-persist/lib/storage'

const persistConfig = {  //数据持久化配置

    key: 'root',

    storage ,             //在localStorge中生成key为root的值

    blacklist:[]          //不持久数据的黑名单

}

export const rootReducer = combineReducers({ MyData:dataSlice})  //合并数据模块

const myPersistReducer = persistReducer(persistConfig, rootReducer) //持久化数据模块

export const store = configureStore({                                           //配置仓库

    reducer:myPersistReducer,

    middleware: (getDefaultMiddleware) =>

    getDefaultMiddleware({

      serializableCheck: false,                                             //不检查序列化

    })

})

export const persistore = persistStore(store)         //持久化仓库

8.在main,js文件中全局引入并包裹根组件

import { Provider } from 'react-redux'

import { store } from './rtk/store';

<Provider store={store}>

                <App/>

 </Provider>

9.组件中使用dataSlice的数据和方法

import { useDispatch, useSelector } from 'react-redux'

import { dataAdd, dataSelector } from '../../rtk/reducers/dataSlice'

  const data= useSelector(dataSelector)       //取dataSlice数据

  const dispatch = useDispatch()

 <div onClick={()=>dispatch(dataAdd(1))}>   //使用dataSlice方法