redux-toolkit轻量级上手使用

首先安装脚手架:
npx create-react-app myapp --template redux 一键下载搭建好rtk的react脚手架
如果之前在项目开发中用习惯拆分模块的写法，可以将目录中app和features文件夹删除，手动实现搭建store
话不多说开工：
新建store文件夹/index.js文件

import {configureStore} from '@reduxjs/toolkit'
import testReducer from './test'
export default configureStore({
    reducer: {
        test: testReducer,
    }
})

以前咱不是用createStore，现在用configureStore
configureStore: 对标准 ReduxcreateStore函数的友好抽象
在store文件夹中在新建一个test.js

import {
    createAsyncThunk,
    createSlice
} from '@reduxjs/toolkit';//引入

export const getData = createAsyncThunk(//创建异步action
    'test/getData',
    async(payload, {dispatch}) => {//回调中的两个参数 => payload 方法调用时传入的有效载荷；第二个参数相当于当前仓库上下文 ，结构出dispatch
        let res = await new Promise((resolve) => {//模拟异步
            setTimeout(() => {resolve(payload)}, 500)
        })
        dispatch(setData(res))//调用更改状态的方法
        return res //return 出去的值我们可以在extraReducers中接收 有三种状态：
        /**
         * pending: 运行中
         * fulfilled: 完成
         * rejected: 异常
         * ***/
    }
)
export const testSlice = createSlice({//创建test集合
    name: 'test',//相当于vuex里的命名空间
    initialState: {//初始化状态
        dataState: 'resolve',//描述data改变成功与否的状态
        data: [],
        count: 0
    },
    reducers: {//定义更改状态的方法
        setData(state, {payload}) {
            state.data = payload
        },
        setCount(state, {payload}) {
            state.count = payload
        }
    },
    extraReducers(builder) {
        /**
         * pending: 运行中
         * fulfilled: 完成
         * rejected: 异常
         * ***/
        //可以根据返回的三个状态做一些精细的操作，例如：dva-loading这个包提供的加载状态功能
        builder.addCase(getData.pending, (state, action) => {
            state.dataState = 'loading'
            console.log(action)
        }).addCase(getData.fulfilled, (state, action) => {
            state.dataState = 'resolve'
            console.log(action.payload)
        }).addCase(getData.rejected, (state, action) => {
            state.dataState = 'reject'
            console.log(action)
        })
    }
})

export const {//抛出相当于老版的action对象中的type值
    setData,
    setCount
} = testSlice.actions

export default testSlice.reducer//暴露当前仓库，到store/index.js中合并，实现模块化

脚手架入口文件该怎么引入还是怎么引入,和老板一样

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

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

函数组件中应用

import React from 'react'
import {useSelector, useDispatch} from 'react-redux'//引入量hooks
import {setCount, getData} from './store/test'//引入test.js文件中那两方法
export default function App() {
  const state = useSelector(state => ({state}))//状态
  const dispatch = useDispatch()//执行后可以分发action
  return (
    <div>
      {state.state.test.count}
      <br></br>
      <button onClick={() => {dispatch(setCount(2))}}>
        click me
      </button>
      <br></br>
      <button onClick={() => dispatch(getData(['1', '2']))}>click me set list</button>
    </div>
  )
}

总结一手：rtk更加的简单易用，让react前端工作者更好的去管理公共状态，更好上手，更清楚的看到数据流动，比dva还要轻便简单，对标vue的vuex
无脑上手，简单易懂，一眼上手rtk。