react18中Redux Toolkit进一步排除公共数据仓库使用的心智成本

Redux Toolkit的出现,让我们进一步释放双手,越来越简单啦!!如果你觉得redux-thunk不好用的话,官方又给我们推出了一套的新的方案:redux-toolkit,当你用完后,你会发现,和vue3pinia是多么的相似!!!

redux-toolkit 内部帮我们做了很多内置工作,让我们可以直接修改state,不再需要redux-immutablemmutable,使我们能方便的处理数据了。

实现效果

代码实现

  • 安装
bash 复制代码
npm i redux-toolkit
  • store/index.js
js 复制代码
import { configureStore } from "@reduxjs/toolkit";
import CounterReducer from "./CounterReducer";

export const store = configureStore({
  reducer: {
    count: CounterReducer,
    // other reducers
  },
});

export default store;
  • CounterReducer.js
js 复制代码
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
  counter: 0,
  userInfo: {
    name: "John Doe",
    age: 25,
  },
};
export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    add: (state) => {
      state.counter += 1;
      console.log("🚀 ~ state:", state.counter);
    },
    dec: (state) => {
      state.counter -= 1;
      console.log("🚀 ~ state:", state.counter);
    },
    changeName: (state, action) => {
      console.log("🚀 ~ payload:", action);
      state.userInfo.name = action.payload;
    },
    handleDelayAddByTen1: (state, action) => {
      console.log("🚀 ~ action:", action);
      state.counter += action.payload;
    },
  },
});

// async action 2s later
function handleDelayAdd() {
  return (dispatch) => {
    setTimeout(() => dispatch(add()), 2000);
  };
}

// async action 2s later
function handleDelayReduce() {
  return (dispatch) => {
    setTimeout(() => dispatch(dec()), 2000);
  };
}

function handleDelayAddByTen(count) {
  return (dispatch) => {
    setTimeout(() => dispatch(handleDelayAddByTen1(count)), 2000);
  };
}

// export actions,提供给组件调用
export const { add, dec, changeName, handleDelayAddByTen1 } =
  counterSlice.actions;

export { handleDelayAdd, handleDelayReduce, handleDelayAddByTen };

// export reducer,提供给store使用
export default counterSlice.reducer;
  • DemoB.js
js 复制代码
import { useSelector, useDispatch } from "react-redux";
import { Button, Space, Divider } from "antd";
import {
  add,
  dec,
  changeName,
  handleDelayAdd,
  handleDelayReduce,
  handleDelayAddByTen,
} from "../../store/CounterReducer";
function DemoB() {
  const count = useSelector((state) => state.count.counter);
  const userInfo = useSelector((state) => state.count.userInfo);
  const dispatch = useDispatch();
  return (
    <div>
      <p>Demo B</p>
      <div>
        <Space split={<Divider />}>
          <span>name: {userInfo.name}</span>
          <span>age: {userInfo.age}</span>
          <span>count:{count}</span>
        </Space>
      </div>
      <Space>
        <Button type="primary" onClick={() => dispatch(add())}>
          add count
        </Button>
        <Button type="primary" danger onClick={() => dispatch(dec())}>
          minus count
        </Button>
        <Button type="primary" onClick={() => dispatch(handleDelayAdd())}>
          delay 2s add count
        </Button>
        <Button
          type="primary"
          danger
          onClick={() => dispatch(handleDelayReduce())}
        >
          delay 2s minus count
        </Button>
        <Button
          type="primary"
          onClick={() => dispatch(handleDelayAddByTen(10))}
        >
          delay 2s add count by 10
        </Button>
        <Button
          type="dashed"
          danger
          onClick={() => dispatch(changeName("张学友"))}
        >
          change name
        </Button>
      </Space>
    </div>
  );
}
export default DemoB;

-DemoA.js

js 复制代码
import { useSelector } from "react-redux";

function DemoA() {
  const count = useSelector((state) => state.count.counter);
  return <div>{<p> Demo A count: {count}</p>}</div>;
}
export default DemoA;
  • index.js
js 复制代码
import DemoA from "./DemoA";
import DemoB from "./DemoB";
import store from "../../store/index";
import { useEffect, useState } from "react";
import { Divider, Space } from "antd";
import { useSelector } from "react-redux";
function Redux() {
  const count = useSelector((state) => state.count.counter);
  return (
    <div>
      Redux parent count:{count}
      <Divider />
      <Space split={<Divider type="vertical" />}>
        <DemoA />
        <DemoB />
      </Space>
    </div>
  );
}

export default Redux;

总结

  • 这一套下来,简直不要太简单了,同步异步的操作与redux-thunk大同小异了,很容易理解。
  • 参考redux-toolkit官网地址
相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown10 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎10 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip