RTK的使用教程

 常用 API

• configureStore ：创建 Redux store 实例
• createSlice ：创建切片处理
• createAction ：创建 actions 函数
• createReducer ：创建 reducer 函数
• createAsyncThunk ：处理异步动作

• 1、先创建一个 store 文件夹，新建 index.ts 文件

• 导入 configureStore 创建一个 store ，内部使用 reducer 整合模块，导出 store
• 导出 全局数据的类型定义 RootState 和全局处理函数 AppDispatch 的类型定义

index.ts文件

import { configureStore } from "@reduxjs/toolkit"
import appReducer from "./modules/app"
const store = configureStore({
    // 整合模块
    reducer: {
        app: appReducer,
    }
})


export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
export default store;

在根目录 index.ts 文件中，引入 react-redux 的 provider，并将导出的 store 当作 prop传递给它。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.less';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';

import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>

    </Provider>

  </React.StrictMode>
);

• 2、再新建 hook.ts 文件

• 导出 useAppDispatch 和 useAppSelector
• 导出的 useAppDispatch 要遵循  AppDispatch 规范，useAppSelector 要遵循 RootState规范
• useAppDispatch：将数据传给全局处理函数，调用 dispatch 返回一个 reducer 函数
• useAppSelector：将数据传给全局数据

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

import { AppDispatch, RootState } from './index'

export const useAppDispatch: () => AppDispatch = useDispatch

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

• 3、创建一个 modules 文件夹，内部包含 app.ts 文件

• 导入 createSlice 方法创建一个 appSlice 。每一个 slice 里面包含了reducers 和 name、initialState，可以实现模块化的封装。导出 appSlice

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

interface IState {
    count: number,
    collapsed: boolean
}

const initialState: IState = {
    count: 100,
    collapsed: store2.get('collapsed') == 'true'
}

const appSlice = createSlice({
    name: 'app',//模块名称
    initialState,//初始化状态
    reducers: {
 // 这里的属性会自动的导出为 actions，在组件中可以直接通过 dispatch 进行触发
        addCount(state, action: PayloadAction<number>) {
            state.count += action.payload
        },
        setCollapsed(state, action: PayloadAction<boolean>) {

            // 保留用户的使用习惯,持久化
            store2.set('collapsed', String(action.payload))
            state.collapsed = action.payload
        }
    }
})

//暴露可以修改组件状态对的函数
export const { addCount, setCollapsed } = appSlice.actions

//默认暴露出模块的reducer
export default appSlice.reducer

4、使用

1、导入
import { useAppDispatch } from '@/store/hook';

2、定义
const dispatch = useAppDispatch()

3、使用
//保存到 rtk 中
dispatch(changeLoginState(true))
dispatch(changeAdminName(result.adminname))
dispatch(changeToken(result.token))