轻松搞定 reduxjs/toolkit

轻松搞定 reduxjs/toolkit - 简书

1. 前言

1. toolkit
2. 最近创建 react脚手架项目的时候发现, 默认安装的 react版本已经变为18X了,
3. 原来的项目换成18X也能运行,但是 redux中的createStore出现了横岗也就是被废弃了
4. 那就看看 新出的啥东西代替了createStore,体验下好用不

---

2. 是什么 what

Redux Toolkit包旨在成为编写Redux逻辑的标准方式。它最初的创建是为了帮助解决关于 Redux 的三个常见问题：

1. 配置 Redux 存储太复杂了
2. 我必须添加很多包才能让 Redux 做任何有用的事情
3. Redux 需要太多样板代码

---

3. 环境安装

注意不要拼错 @reduxjs/toolkit

npm install @reduxjs/toolkit react-redux
yarn add @reduxjs/toolkit react-redux

react-redux 也需要单独安装

---

4. configureStore

1. configureStore替代 createStore
2. 配置简单,设置默认值也方便
3. src/store/index.js

// 引入
import {configureStore} from '@reduxjs/toolkit'
import counterSlice from "../pages/basic/counterSlice"
import mySlice from "../pages/mySlice"

export default configureStore({
  reducer:{
    rootCounter:counterSlice,
    rootMy:mySlice
  }
})

1. 这里 reduer直接合并成一个唯一的 根root了
2. 原有的combineReducers这个合并函数就用不到了
3. 注意自己配置的 reducer的 key值 和 对应的value值
4. 我这里把单独的 reducer 放到和页面同级了,这个根据自己的习惯,放到 store下面新建目录存放所有的reducer也行

---

5. 根组件配置 store

1. 入口index.js

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

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

---

6. createSlice reducer编写

1. 创建slice

使用createSlice方法创建一个slice。每一个slice里面包含了reducer和actions，可以实现模块化的封装。
所有的相关操作都独立在一个文件中完成。

2. 关键属性:

1. name
   命名空间，可以自动的把每一个action进行独立，解决了action的type出现同名的文件。在使用的时候默认会把使用name/actionName

1. initialState
   state数据的初始值

3.reducers
定义的action。由于内置了immutable插件，可以直接使用赋值的方式进行数据的改变，不需要每一次都返回一个新的state数据。

import { createSlice } from "@reduxjs/toolkit";
const initialState = {
  counter: 100,
  user: {
    name: "yzs",
    job: "全栈",
  },
};
export const counterSlice = createSlice({
  name: "counterSpace", // 命名空间，在调用action的时候会默认的设置为action的前缀,保证唯一.不重名
  initialState,
  reducers: {
// reducer函数 state当前组件的数据 
//第二个参数为{payload:{},type:"""} 想想就写法或者vuex
    increment(state) {
      state.counter += 100;
    },
    decrement(state, actions) {
      // actions == {payload:{},type:"""}
      console.log("decrement---actions", actions);
      state.counter -= actions.payload;
    },
    updateUser(state, { payload }) {
      console.log("updateUser-------payload", payload);
// 引用类型 注意 赋值的写法
      state.user = {
        ...state.user,
        ...payload,
      };
    },
  },
});
export const { increment, decrement, updateUser } = counterSlice.actions;
export const selectCount = (state) => state.rootCounter.counter;
export const selectUser = (state) => state.rootCounter.user;

export default counterSlice.reducer;

3. 导出

1. counterSlice.actions 导出所有的修改函数方便页面使用
2. counterSlice.reducer 导出reducer在 store里面使用

4. 具体reducer 函数的参数

参数1: 当前slice的state数据
参数2: 对象{type:"",payload:传参}

type:counterSpace/decrement
type就是之前的 actions用switc/case来匹配很麻烦,现在简洁了
type构成 slice的 name命名空间/具体的修改函数

payload 要和传的时候保持一致

---

7. 页面使用

7.1. useSelector()

1. 返回指定的 state

// 这样写太长了 麻烦
 const counter = useSelector(state=>state.rootCouter.counter);

1. rootCouter这个key 来源于 根 store里面配置的reducer
2. 这样写太长了 麻烦
3. 在这个 slice里面我做了统一处理

export const selectCount = (state) => state.rootCounter.counter;
export const selectUser = (state) => state.rootCounter.user;

1. 页面使用

import { useSelector, useDispatch } from "react-redux";
import {
  increment,
  decrement,
  updateUser,
  selectCount,
  selectUser,
} from "./normalSlice";
export default function Counter() {
  const dispatch = useDispatch();

  // let counter = useSelector(state=>state.rootCouter.counter)
  const counter = useSelector(selectCount);
  console.log("页面---counter:", counter);
  const user = useSelector(selectUser);

// 这样可以直接解构出当前 slice所有的 state
// 具体用哪种 看自己心情
 const { counter } = useSelector((state) => state.rootCouter);

return ( <div> 布局看下面 </div>)

---

7.2 useDispatch()

const dispatch = useDispatch(); 修改函数

  return (
    <div>
      <h1>reduxjs/toolkit 基础用法</h1>
      <hr />
      <button onClick={() => dispatch(increment())}>+</button>
      <span>{counter}</span>
      <button onClick={() => dispatch(decrement(666))}>-</button>
      <hr />
      <h1>姓名:{user.name} ---职业:{user.job}</h1>
      <button onClick={()=>{dispatch(updateUser({name:'Michael'}))}}>改名</button>
      <button onClick={()=>{
        dispatch(updateUser({job:'自由职业者'}))}
        }>转行</button>
    </div>
  );
}

1. payload传参和 reducer保持一致
2. 引用类型的 修改注意

---

8. 异步 createAsyncThunk()

1. 接受一个动作类型字符串和一个返回Promise函数，并生成一个pending/fulfilled/rejected基于该Promise分派动作类型的 thunk
2. 用 fetch请求模拟一个异步
   3.createAsyncThunk("counterSpace/getList",()=>{})
3. 参数1: slice的name/命名空间/函数名

// return 不要忘记
export const getList = ( ) => {
return fetch("https://.XX.cn/api/news").then(res=>res.json());
};
export const  getListAsync =  createAsyncThunk("counterSpace/getList",async()=>{
  const res = await getList()
  return res// 此处的返回结果会在 .fulfilled中作为payload的值
});

---

9.extraReducers

1. 异步函数配置

createSlice({
    name: "counterSpace",
    initialState,
    reducers:{},
    extraReducers: (builder) => {
    builder
      .addCase(getListAsync.pending, (state) => {
         console.log("pending",state);
      })
      .addCase(getListAsync.rejected, (state, err) => {
        console.log("rejected 失败",err);

      })
      .addCase(getListAsync.fulfilled, (state, action) => {
         console.log("fulfilled 成功",state);
        console.log("fulfilled action",action);

        state.list = action.payload
      });
  },
});

1. 这个配置基本就是套路
2. 只需要把函数名字改为通过createAsyncThunk()创建的函数名
3. 根据自己的业务场景 写赋值逻辑就行

---

10. 页面使用异步函数

<button onClick={()=>dispatch(getListAsync('异步模拟'))}>异步</button>
      <ul>
        {
          listData.map((news)=>{
            return <li key={news.id}>{news.title}</li>
          })
        }
      </ul>

1. 效果图

2. 

   1.png

3. 也可以传参数

---

参考资料

redux-toolkit

作者：云高风轻
链接：https://www.jianshu.com/p/3e9683de4268
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。