手写redux的connect方法, 使用了subscribe获取最新数据

一. 公共方法文件

1. connect文件

import React, { useState } from "react";
import MyContext from "./MyContext";
import _ from "lodash";// 模拟react-redux的 connect高阶函数
const connect = (mapStateToProps, mapDispatchToProps) => {return (Component) => props => wrapper(Component, {mapStateToProps, mapDispatchToProps, ...props});
};const wrapper = (Comp, props) => {const {mapStateToProps, mapDispatchToProps, ...rest} = propsreturn <MyContext.Consumer>{store => {const dispatch = _.get(store, 'dispatch');const dispatchs = mapDispatchToProps(dispatch);// store.subscribe监听store.getState()获取最新的值const [states, setStates] = useState({})store.subscribe(() => {const state1 = store.getState();setStates(mapStateToProps(state1))});return <Comp {...{...states, ...dispatchs, ...rest}}/>;}}</MyContext.Consumer>}export default connect;

2. MyContext文件:

import React from "react";
import createContext from './createContext'const MyContext = createContext({});export default MyContext

3. createContext文件:

import React from "react";const createContext = ({}) => {let value = {};const Provider = (props) => {value = props.value;return <>{props.children}</>;};const Consumer = ({ children }: { children: any }) => {return <>{typeof children === "function" ? children(value) : children}</>;};return { Provider, Consumer };
};export default createContext;

4. reducer文件

// 新增列表数据和改变数组数据
// 将业务逻辑拆分到一个单独文件中，方便进行状态管理
import _ from 'lodash';export interface StateProps {id: number;text: string;isFinished: boolean;}export interface ActionProps {type: string;[key: string]: any;}interface IStateObjectProps {pickerArr: StateProps[];filterTag: 'SHOW_ALL'|'SHOW_FINISHED'|'SHOW_NOT_FINISH';dispatch: any;}
const reducer = (state: IStateObjectProps, action: ActionProps) => {console.log(state, action, 'reducer');const pickerArr0 = _.get(state, 'pickerArr')||[];switch (action.type) {case "ADD":return {...state,pickerArr: [...pickerArr0, _.get(action, 'todo')]};case "CHANGESTATUS":const pickerArr = _.map(pickerArr0, (item) => {if (item.id === action.id) {return Object.assign({}, item, { isFinished: !_.get(item, 'isFinished') });}return item;})||[];return {...state,pickerArr,}case 'SET_VISIBILITY_FILTER': const filterTag = action.filterTag;return {...state,filterTag,};default:return state || {};}};export default reducer

5. mapStateToProps文件:

import React from "react";
import _ from "lodash";
import store from "./store";// 不同类型的 todo 列表const getVisibleTodos = (todos, filter) => {switch (filter) {case "SHOW_ALL": // 全部显示return todos;case "SHOW_FINISHED":return todos.filter((t) => t.isFinished);case "SHOW_NOT_FINISH":return todos.filter((t) => !t.isFinished);default:return todos;}
};export const mapStateTotProps = (state) => {// console.log(state, 'mapStateTotProps', store)return {todoList: getVisibleTodos(_.get(state, 'pickerArr')||[], _.get(state, 'filterTag'))|| [],}
}

6. mapDispatchToProps文件

import React from "react";
import _ from "lodash";
import { StateProps } from "./reducer";export const mapDispatchToProps = (dispatch) => {// console.log(dispatch, 'mapDispatchToProps============')// 筛选todo列表const onFilterTodoList = (filterTag) => {dispatch({ type: 'SET_VISIBILITY_FILTER', filterTag, });};const changeTodo = (id: number) => {dispatch({ type: "CHANGESTATUS", id: id });};// 添加todoconst addTodo = (todo: StateProps) => {dispatch({ type: "ADD", todo });};const showAll = () => onFilterTodoList("SHOW_ALL");const showFinished = () => onFilterTodoList("SHOW_FINISHED");const showNotFinish = () => onFilterTodoList("SHOW_NOT_FINISH");return {changeTodo,addTodo,showAll,showFinished,showNotFinish,};
}

由mapStateToProps文件和mapDispatchToProps文件可知, 我们需要想办法获取最新的state, 和通用的dispatch方法, 也就是以下所说的store文件里面的默认导出对象:

7. store文件:

import React from 'react';
import reducer from './reducer'function createStore(reducer) {let state = null;const listeners = [];const subscribe = (fn) => listeners.push(fn);const getState = () => state;const dispatch = (action) => {const state1 = reducer(state, action);state = state1// 因为是在获取到最新的state的值之后有执行的监听回调, 所以使用store.subscribe可以监听到最新的state的值!!!listeners.forEach((fn) => fn());return state}// dispatch({}) return { getState, dispatch, subscribe, reducer }
}const store = createStore(reducer)console.log(store.getState(), 'oldState======')
store.subscribe(() => {const newState = store.getState() // 数据可能变化，需要监听最新的console.log(newState, 'newState====');
})export default store;

8. ContextProvider组件:

import React from "react";
import MyContext from "./MyContext";
import store from "./store";
import _ from "lodash";// 父组件
const ContextProvider = ({ children }) => {return <MyContext.Provider value={store}>{children}</MyContext.Provider>;
};export default ContextProvider;

二. 使用公共文件

1.  TodoInput组件

import React, { useState } from "react";
import "./TodoInput.scss";
import connect from './connect';
import { mapStateTotProps } from "./mapStateToProps";
import { mapDispatchToProps } from "./mapDispatchToProps";// 子组件
const TodoInput = (props) => {const [text, setText] = useState("");const {addTodo,showAll,showFinished,showNotFinish,} = props;const handleChangeText = (e: React.ChangeEvent) => {setText((e.target as HTMLInputElement).value);};const handleAddTodo = () => {if (!text) return;addTodo({id: new Date().getTime(),text: text,isFinished: false,});setText("");};return (<div className="todo-input"><inputtype="text"placeholder="请输入代办事项"onChange={handleChangeText}value={text}/><button onClick={handleAddTodo}>+添加</button><button onClick={showAll}>show all</button><button onClick={showFinished}>show finished</button><button onClick={showNotFinish}>show not finish</button></div>);
};export default connect(mapStateTotProps, mapDispatchToProps)(TodoInput);

2. TodoList组件

import React from "react";
import TodoItem from "./TodoItem";
import _ from "lodash";
import connect from "./connect";
import { mapStateTotProps } from "./mapStateToProps";
import { mapDispatchToProps } from "./mapDispatchToProps";const TodoList = (props) => {const { todoList } = props;return (<><p>checckbox-list: </p><div className="todo-list">{_.map(todoList, (item) => (<TodoItem key={_.get(item, "id")} todo={item || {}} />))}</div><hr /></>);
};export default connect(mapStateTotProps, mapDispatchToProps)(TodoList);

3. TodoItem组件

import _ from 'lodash';
import React from "react";
import connect from './connect';
import { mapStateTotProps } from "./mapStateToProps";
import { mapDispatchToProps } from "./mapDispatchToProps";// 孙子组件
const TodoItem = (props: any) => {const { todo, changeTodo } = props;// 改变事项状态const handleChange = () => {changeTodo(_.get(todo, 'id'));}return (<div className="todo-item"><input type="checkbox" checked={todo.isFinished} onChange={handleChange} /><span style={{ textDecoration: _.get(todo, 'isFinished') ? 'line-through' : 'none' }}>{todo.text}</span></div>)
}export default connect(mapStateTotProps, mapDispatchToProps)(TodoItem);

4. Todo组件:

import React from "react";
import TodoInput from "./TodoInput";
import TodoList from "./TodoList";// 父组件
const Todo = () => {return (<><TodoInput /><TodoList /></>);
};
export default Todo;

5. App组件使用ContextProvider包裹Todo组件

import React from "react";
import Todo from './mockConnectProvider/Todo'
import ContextProvider from './mockConnectProvider/ContextProvider'const App: React.FC = () => {return (<ContextProvider><Todo /></ContextProvider>);
};export default App;

效果图如下:

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/165474.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数学建模——最优连接（基于最小支撑树）

数学建模——最优连接（基于最小支撑树）

一、概念 1、图的生成树 由图G(V,E)的生成子图G1(V,E1)(E1是E的子集&#xff09;是一棵树&#xff0c;则称该树为图G的生成树&#xff08;支撑树&#xff09;&#xff0c;简称G的树。图G有支撑树的充分必要条件为图G连通。 2、最小生成树问题 连通图G(V,E)&#xff0c;每条边…
阅读更多...
STM32串口

STM32串口

前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 目前已经学习了GPIO的输入输出&#xff0c;但是没有完整的显示信息&#xff0c;最便宜的显示就是串口。 000 -111 AVR单片机 已经学会过了&#xff0c; 提示&#xff1a;以下是本篇文章正文内容&#x…
阅读更多...
Servlet的生命周期

Servlet的生命周期

2023.10.18 WEB容器创建的Servlet对象&#xff0c;这些Servlet对象都会被放到一个集合当中&#xff08;HashMap&#xff09;&#xff0c;这个集合当中存储了Servlet对象和请求路径之间的关系 。只有放到这个HashMap集合中的Servlet才能够被WEB容器管理&#xff0c;自己new的Ser…
阅读更多...
《视觉 SLAM 十四讲》V2 第 10 讲 后端优化2 简化BA 【位姿图】

《视觉 SLAM 十四讲》V2 第 10 讲 后端优化2 简化BA 【位姿图】

文章目录 第10讲 后端210.1 滑动窗口滤波 和 优化10.1.2 滑动窗口法 10.2 位姿图10.3 实践&#xff1a; 位姿图优化本讲 CMakeLists.txt 10.3.1 g2o 原生位姿图 【Code】10.3.2 李代数上的位姿优化 【Code】 习题10题1 【没推完】 LaTex 第10讲 后端2 滑动窗口优化 位姿图优化…
阅读更多...
最新！两步 永久禁止谷歌浏览器 Google Chrome 自动更新

最新！两步 永久禁止谷歌浏览器 Google Chrome 自动更新

先放效果图&#xff1a; CSDN这个问题最火的大哥的用了没用 像他这样连浏览器都打不开 为什么要禁止chrome自动更新 看到很多搞笑的大哥&#xff0c;说为啥要禁止&#xff1b; 我觉得最大的原因就是chromedriver跟不上chrome的自动更新&#xff0c;导致我们做selenium爬虫的…
阅读更多...
CentOS 7 安装 MySQL 8

CentOS 7 安装 MySQL 8

一、卸载MariaDB MariaDB是MySQL 的一个分支&#xff0c;完全兼容MySQL&#xff0c;包括API和命令行&#xff0c;使之能轻松成为MySQL的代替品。 1、查看版本&#xff08;如果有就卸载&#xff09; rpm -qa|grep mariadbrpm -e --nodeps 文件名 二、下载mysql 1、进入 /usr/…
阅读更多...
中枢听觉处理障碍的行为干预方法

中枢听觉处理障碍的行为干预方法

作者&#xff1a;听觉健康 在数十年前&#xff0c;中枢听觉处理障碍(CAPD)的研究已经引起了多学科的关注。1937年&#xff0c;Samuel Orton提出某些儿童的学习障碍与不能有效利用听觉有关。Myklebust是提出“中枢性听力障碍”引起儿童语言学习障碍的先驱者之一。二十世纪五十年…
阅读更多...
C# Winform编程（7）文件处理技术

C# Winform编程（7）文件处理技术

文件处理技术 System.IO命名空间System.IO命名空间常用的类System.IO命名空间常用的枚举 File类的常用方法FileInfo类的常用方法File类和FileInfo类的区别文件夹类Directory的常用方法 System.IO命名空间 System.IO命名空间常用的类 类说明File提供用于创建&#xff0c;复制&…
阅读更多...
【数之道 08】走进“卷积神经网络“，了解图像识别背后的原理

【数之道 08】走进“卷积神经网络“，了解图像识别背后的原理

卷积神经网络 CNN模型的架构Cnn 的流程第一步 提取图片特征提取特征的计算规则 第二步 最大池化第三步 扁平化处理第四步 数据条录入全连接隐藏层 b站视频 CNN模型的架构 图片由像素点组成&#xff0c;最终成像效果由背后像素的颜色数值所决定的 有这样的一个66的区域&#x…
阅读更多...
YOLOv5改进实战 | 更换主干网络Backbone（三）之轻量化模型Shufflenetv2

YOLOv5改进实战 | 更换主干网络Backbone（三）之轻量化模型Shufflenetv2

前言 轻量化网络设计是一种针对移动设备等资源受限环境的深度学习模型设计方法。下面是一些常见的轻量化网络设计方法： 网络剪枝：移除神经网络中冗余的连接和参数，以达到模型压缩和加速的目的。分组卷积：将卷积操作分解为若干个较小的卷积操作，并将它们分别作用于输入的不…
阅读更多...
2023年中国纸箱机械优点、市场规模及发展前景分析[图]

2023年中国纸箱机械优点、市场规模及发展前景分析[图]

纸箱机械行业是指涉及纸箱生产和加工的机械设备制造、销售和相关服务的产业。这个行业的主要任务是设计、制造和提供用于生产各种类型和规格纸箱的机械设备&#xff0c;以满足包装行业对纸箱的不同需求。 纸箱机械行业优点 资料来源&#xff1a;共研产业咨询&#xff08;共研网…
阅读更多...
SpringBoot + MyBatis 在 jar 中可以启动但是 Idea中无法启动的原因

SpringBoot + MyBatis 在 jar 中可以启动但是 Idea中无法启动的原因

现象 在idea中启动始终卡住&#xff0c;查看线程堆栈发现一直在mybatis的处理过程中&#xff0c;细究了一下堆栈发现mybatis有使用远程方式加载类的情况&#xff0c;并且此时cpu会飙升&#xff0c; 在命令行中使用java -jar 的形式可以正常启动&#xff0c;但是在idea中启动始…
阅读更多...
在 Visual Studio Code (VS Code) 中设置

在 Visual Studio Code (VS Code) 中设置

在 Visual Studio Code (VS Code) 中设置代理服务器的详细教程如下&#xff1a; 打开 Visual Studio Code。 在顶部菜单栏中&#xff0c;点击 "File"&#xff08;文件&#xff09; > "Preferences"&#xff08;首选项&#xff09; > "Settings…
阅读更多...
解剖—单链表相关OJ练习题

解剖—单链表相关OJ练习题

目录 一、移除链表元素 二、找出链表的中间节点 三、合并两个有序链表 四、反转链表 五、求链表中倒数第k个结点 六、链表分割 七、链表的回文结构 八、判断链表是否相交 九、判断链表中是否有环(一) 十、 判断链表中是否有环(二) 注&#xff1a;第六题和第七题牛…
阅读更多...
win11快速打开蓝牙设置的方法

win11快速打开蓝牙设置的方法

win11快速打开蓝牙设置的方法 Windows 11 中快速连接蓝牙设备的 3 种方法&#xff01;_哔哩哔哩_bilibili 如何为Windows设置快捷键&#xff1f;_百度知道 (baidu.com) Win11怎么隐藏文件夹?Win11通过命令隐藏文件夹的方法_windows11_Windows系列_操作系统_脚本之家 (jb51.net…
阅读更多...
《动手学深度学习 Pytorch版》 9.5 机器翻译与数据集

《动手学深度学习 Pytorch版》 9.5 机器翻译与数据集

机器翻译&#xff08;machine translation&#xff09;指的是将序列从一种语言自动翻译成另一种语言&#xff0c;基于神经网络的方法通常被称为神经机器翻译&#xff08;neural machine translation&#xff09;。 import os import torch from d2l import torch as d2l9.5.1 …
阅读更多...
Kotlin(七) 接口

Kotlin(七) 接口

接口是用于实现多态编程的重要组成部分。我们都知道&#xff0c;Java是单继承结构的语言&#xff0c;任何一个类最多只能继承一个父类&#xff0c;但是却可以实现任意多个接口&#xff0c;Kotlin也是如此。 首先创建一个Study接口&#xff0c;在创建文件窗口选择“Interface…
阅读更多...
面对DDoS和APT攻击，我们该如何有效防御？

面对DDoS和APT攻击，我们该如何有效防御？

关于DDoS&#xff08;Distributed Denial of Service&#xff09;分布式拒绝服务攻击&#xff0c;是指攻击者通过技术手段&#xff0c;在很短的时间内对目标攻击网站发出大量请求&#xff0c;极大地消耗相关网站的主机资源&#xff0c;导致其无法正常服务。 打个比方来说&#…
阅读更多...
AI驱动的未来：探索人工智能的无限潜力 | 开源专题 No.39

AI驱动的未来：探索人工智能的无限潜力 | 开源专题 No.39

这一系列开源项目代表着多个领域的最新技术成果&#xff0c;包括深度学习、自然语言处理、计算机视觉和分布式训练。它们共同的特点是致力于教育、资源分享、开源精神、多领域应用以及性能和效率的追求&#xff0c;为广大开发者、研究者和学生提供了宝贵的工具和知识&#xff0…
阅读更多...
开源网安受邀参加数字安全高峰论坛，为数字经济发展保驾护航

开源网安受邀参加数字安全高峰论坛，为数字经济发展保驾护航

​10月19日&#xff0c;“提升数字安全技术&#xff0c;护航数字经济发展”高峰论坛在常州创意产业园圆满完成。本次论坛由常州国家高新区管委会、常州市工业和信息化局、常州市大数据管理中心主办&#xff0c;聚焦“数据安全”主题&#xff0c;邀请了超百位专家及企业代表共同…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023