react18中引入redux及react-redux来管理公共数据仓库

前面已经介绍了redux的用法,但是在实际项目中,还是不够用的,不仅写法操作比较繁琐,而且实现的功能还有限,这篇我们引入官方推荐的react-redux来简化我们的代码

实现效果

代码改造

  • 安装相关依赖
bash 复制代码
npm i react-redux

store.js改写

js 复制代码
import { createStore } from "redux";
import { combineReducers } from "redux-immutable";

import { CounterReducer } from "./CounterReducer";

const reducers = combineReducers({
  count: CounterReducer,
});

const store = createStore(reducers);

export default store;

CounterReducer.js改写

js 复制代码
import { fromJS } from "immutable";
const initialState = fromJS({
  counter: 0,
  userInfo: {
    name: "John Doe",
    age: 25,
  },
});
function CounterReducer(state = initialState, action) {
  console.log("🚀 ~ CounterReducer ~ action:", action);
  switch (action.type) {
    case "ADD":
      return state.update("counter", (val) => {
        return val + 1;
      });
    case "DEC":
      return state.update("counter", (val) => val - 1);
    case "CHANGE_NAME":
      return state.setIn(["userInfo", "name"], action.payload);
    default:
      return state;
  }
}

export { CounterReducer };

DemoA.js

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

function DemoA() {
  const count = useSelector((state) => state.getIn(["count", "counter"]));
  return (
    <div>
      <p> Demo A count: {count}</p>
    </div>
  );
}
export default DemoA;

DemoB.js

js 复制代码
import { useSelector, useDispatch } from "react-redux";
import { Button, Space, Divider } from "antd";
function DemoB() {
  const count = useSelector((state) => state.getIn(["count", "counter"]));
  const userInfo = useSelector((state) => state.getIn(["count", "userInfo"]));
  const dispatch = useDispatch();
  return (
    <div>
      <p>Demo B</p>
      <div>
        <Space split={<Divider />}>
          <span>name: {userInfo.get("name")}</span>
          <span>age: {userInfo.get("age")}</span>
          <span>count:{count}</span>
        </Space>
      </div>
      <Space>
        <Button type="primary" onClick={() => dispatch({ type: "ADD" })}>
          add count
        </Button>
        <Button type="primary" danger onClick={() => dispatch({ type: "DEC" })}>
          minus count
        </Button>
        <Button
          type="dashed"
          danger
          onClick={() => dispatch({ type: "CHANGE_NAME", payload: "张学友" })}
        >
          change name
        </Button>
      </Space>
    </div>
  );
}
export default DemoB;

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 counter = useSelector((state) => state.getIn(["count", "counter"]));
  return (
    <div>
      Redux parent count:{counter}
      <Divider />
      <Space split={<Divider type="vertical" />}>
        <DemoA />
        <DemoB />
      </Space>
    </div>
  );
}

export default Redux;

引入了react-redux后的,代码的确是清爽了很多,没有之前的臃肿了。

总结

  • useSelector获取store中的数据
  • useDispatch触发reducer中的方法
  • immutablefromJS方法可以去官网参考它对不同类型的数据操作使用
相关推荐
洛小豆9 分钟前
她问我::is-logged 是啥?我说:前面加冒号,就是 Vue 在发暗号
前端·vue.js·面试
我有一棵树14 分钟前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
white-persist29 分钟前
JWT 漏洞全解析:从原理到实战
前端·网络·python·安全·web安全·网络安全·系统安全
果粒chenl1 小时前
React学习(四) --- Redux
javascript·学习·react.js
IT_陈寒1 小时前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start1 小时前
前端基础一、HTML5
前端·html·html5
鬼谷中妖1 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A2 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER2 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父2 小时前
前端速通—CSS篇
前端·css