Redux tooltik的使用步骤

1.创建react项目之后安装redux和redux-toolkit

npm install redux react-redux

npm install @reduxjs/toolkit

2.创建store

用configurestore创建一个库，并导出

import { configureStore } from '@reduxjs/toolkit';
import counterSlice from './counterSlice'
export const store = configureStore({
  reducer: {counter:counterSlice},
});

3.把store通过provider从顶层注入整个app

import "./App.css";
import { Provider } from "react-redux";
import { store } from "./store";
import Routers from "./router";

const App = () => {
  return (
    <Provider store={store}>
      <div className="App">
        <header className="App-header">
          <Routers/>
        </header>
      </div>
    </Provider>
  );
};
export default App;

4. 使用 createSlice 函数创建 slices，它将相关的 actions 和 reducers 组合在一起。并且导出action和reducer

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { fakeFetch } from './api/fakeFetch';
export const fakeFetchCopy: any=createAsyncThunk("ceshi",async(count)=>{
  const res=await fakeFetch(count)
  return res
})
export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state,action: any) => {
      console.log(action)
      state.value =state.value+action.payload+1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    // 其他reducers...
  },
  extraReducers:(builder)=>{
    builder.addCase(fakeFetchCopy.fulfilled,(state,action)=>{
      state.value=action.payload as number
    })
    
  },
});
// 手写异步处理中间件
export const addAsyncThunk=(num: number)=>async(dispatch: any,getState: any)=>{
    const res: any=await fakeFetch(num)
    console.log(res,'res')
    if(getState().counter.value>0){
      dispatch(increment(50 as never))
    }
}

// 导出actions
export const { increment, decrement } = counterSlice.actions;

// 导出reducer
export default counterSlice.reducer;

5.把创建出来的slices放到第二步的reducer中，就完成了整个store的配置

6.使用store中的值，用useSelector导出在counterSlice中的方法，再引入usedispatch方法

然后在事件中使用dispatch(increment(value))改变store，就完成整个流程

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement,fakeFetchCopy,addAsyncThunk} from '../counterSlice';

const CounterComponent = () => {
  
  const count = useSelector((state:any) => state.counter.value);
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(increment(100 as never))}>+</button>
      <span>{count}</span>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(fakeFetchCopy(count))}>异步操作</button>
      <button onClick={() => dispatch(addAsyncThunk(count)as any)}>异步操作2</button>
    </div>
  );
};

export default CounterComponent;

7.在slice切片中通过creatasyncthunk添加中间件（加入异步请求），并把这个异步请求暴露出去供event事件使用，同时在Slice切片组件中新增extraReducers来处理异步请求的结果（请求成功怎么操作，请求失败怎么操作）

还可以手写中间件

8.还可以手写中间件，高阶函数，第二个函数里面有dispatch和getstate函数，通过操作getstate获取store里面的值，通过dispatch操作切片里面的函数，具体在第4步中有手写中间件的代码

export const addAsyncThunk=(num: number)=>async(dispatch: any,getState: any)=>{
    const res: any=await fakeFetch(num)
    console.log(res,'res')
    if(getState().counter.value>0){
      dispatch(increment(50 as never))
    }
}

由此可以完整的完成整个rtk的使用配置