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

    一. 公共方法文件

    1. connect文件

    1. import React, { useState } from "react";
    2. import MyContext from "./MyContext";
    3. import _ from "lodash";
    4.  
    5. // 模拟react-redux的 connect高阶函数
    6. const connect = (mapStateToProps, mapDispatchToProps) => {
    7.   return (Component) => props => wrapper(Component, {mapStateToProps, mapDispatchToProps, ...props});
    8. };
    9.  
    10. const wrapper = (Comp, props) => {
    11.   const {mapStateToProps, mapDispatchToProps, ...rest} = props
    12.   
    13.   return <MyContext.Consumer>
    14.     {store => {
    15.       const dispatch = _.get(store, 'dispatch');
    16.       const dispatchs = mapDispatchToProps(dispatch);
    17.       // store.subscribe监听store.getState()获取最新的值
    18.       const [states, setStates] = useState({})
    19.       store.subscribe(() => {
    20.         const state1 = store.getState();
    21.         setStates(mapStateToProps(state1))
    22.       });
    23.       
    24.       return <Comp {...{...states, ...dispatchs, ...rest}}/>;
    25.     }}
    26.   </MyContext.Consumer>
    27.   
    28. }
    29.  
    30. export default connect;

    2. MyContext文件:

    1. import React from "react";
    2. import createContext from './createContext'
    3.  
    4. const MyContext = createContext({});
    5.  
    6. export default MyContext

    3. createContext文件:

    1. import React from "react";
    2.  
    3. const createContext = ({}) => {
    4.   let value = {};
    5.  
    6.   const Provider = (props) => {
    7.     value = props.value;
    8.  
    9.     return <>{props.children}</>;
    10.   };
    11.  
    12.   const Consumer = ({ children }: { children: any }) => {
    13.     return <>{typeof children === "function" ? children(value) : children}</>;
    14.   };
    15.  
    16.   return { Provider, Consumer };
    17. };
    18.  
    19. export default createContext;

    4. reducer文件

    1. // 新增列表数据和改变数组数据
    2. // 将业务逻辑拆分到一个单独文件中，方便进行状态管理
    3. import _ from 'lodash';
    4.  
    5. export interface StateProps {
    6.     id: number;
    7.     text: string;
    8.     isFinished: boolean;
    9.   }
    10.   export interface ActionProps {
    11.     type: string;
    12.     [key: string]: any;
    13.   }
    14.   
    15.   interface IStateObjectProps {
    16.     pickerArr: StateProps[];
    17.     filterTag: 'SHOW_ALL'|'SHOW_FINISHED'|'SHOW_NOT_FINISH';
    18.     dispatch: any;
    19.   }
    20. const reducer = (state: IStateObjectProps, action: ActionProps) => {
    21.     console.log(state, action, 'reducer');
    22.     const pickerArr0 = _.get(state, 'pickerArr')||[];
    23.     switch (action.type) {
    24.       case "ADD":
    25.         return {
    26.             ...state,
    27.             pickerArr: [...pickerArr0, _.get(action, 'todo')]
    28.         };
    29.       case "CHANGESTATUS":
    30.         const pickerArr = _.map(pickerArr0, (item) => {
    31.           if (item.id === action.id) {
    32.             return Object.assign({}, item, { isFinished: !_.get(item, 'isFinished') });
    33.           }
    34.           return item;
    35.         })||[];
    36.         return {
    37.             ...state,
    38.             pickerArr,
    39.         }
    40.       case 'SET_VISIBILITY_FILTER': 
    41.         const filterTag = action.filterTag;
    42.         return {
    43.             ...state,
    44.             filterTag,
    45.         };
    46.       default:
    47.         return state || {};
    48.     }
    49.   };
    50.  
    51.   export default reducer

    5. mapStateToProps文件:

    1. import React from "react";
    2. import _ from "lodash";
    3. import store from "./store";
    4.  
    5.  // 不同类型的 todo 列表
    6.  const getVisibleTodos = (todos, filter) => {
    7.   switch (filter) {
    8.     case "SHOW_ALL": // 全部显示
    9.       return todos;
    10.     case "SHOW_FINISHED":
    11.       return todos.filter((t) => t.isFinished);
    12.     case "SHOW_NOT_FINISH":
    13.       return todos.filter((t) => !t.isFinished);
    14.     default:
    15.       return todos;
    16.   }
    17. };
    18.  
    19. export const mapStateTotProps = (state) => {
    20.   // console.log(state, 'mapStateTotProps', store)
    21.   return {
    22.     todoList: getVisibleTodos(_.get(state, 'pickerArr')||[], _.get(state, 'filterTag'))|| [],
    23.   }
    24. }

    6. mapDispatchToProps文件

    1. import React from "react";
    2. import _ from "lodash";
    3. import { StateProps } from "./reducer";
    4.  
    5. export const mapDispatchToProps = (dispatch) => {
    6.   // console.log(dispatch, 'mapDispatchToProps============')
    7.   // 筛选todo列表
    8.   const onFilterTodoList = (filterTag) => {
    9.     dispatch({ type: 'SET_VISIBILITY_FILTER', filterTag, });
    10.   };
    11.   const changeTodo = (id: number) => {
    12.     dispatch({ type: "CHANGESTATUS", id: id });
    13.   };
    14.   // 添加todo
    15.   const addTodo = (todo: StateProps) => {
    16.     dispatch({ type: "ADD", todo });
    17.   };
    18.   const showAll = () => onFilterTodoList("SHOW_ALL");
    19.   const showFinished = () => onFilterTodoList("SHOW_FINISHED");
    20.   const showNotFinish = () => onFilterTodoList("SHOW_NOT_FINISH");
    21.   
    22.   return {
    23.     changeTodo,
    24.     addTodo,
    25.     showAll,
    26.     showFinished,
    27.     showNotFinish,
    28.   };
    29. }

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

    7. store文件:

    1. import React from 'react';
    2. import reducer from './reducer'
    3.  
    4. function createStore(reducer) {
    5.     let state = null;
    6.     const listeners = [];
    7.     const subscribe = (fn) => listeners.push(fn);
    8.     const getState = () => state;
    9.     const dispatch = (action) => {
    10.         const state1 = reducer(state, action);
    11.         state = state1
    12.         // 因为是在获取到最新的state的值之后有执行的监听回调, 所以使用store.subscribe可以监听到最新的state的值!!!
    13.         listeners.forEach((fn) => fn());
    14.         return state
    15.     }
    16.     // dispatch({}) 
    17.     return { getState, dispatch, subscribe, reducer }
    18. }
    19.  
    20. const store = createStore(reducer)
    21.  
    22. console.log(store.getState(), 'oldState======')
    23. store.subscribe(() => {
    24.     const newState = store.getState() 
    25.     // 数据可能变化，需要监听最新的
    26.     console.log(newState, 'newState====');
    27. })
    28.  
    29.  
    30. export default store;

    8. ContextProvider组件:

    1. import React from "react";
    2. import MyContext from "./MyContext";
    3. import store from "./store";
    4. import _ from "lodash";
    5.  
    6. // 父组件
    7. const ContextProvider = ({ children }) => {
    8.   return <MyContext.Provider value={store}>{children}MyContext.Provider>;
    9. };
    10.  
    11. export default ContextProvider;

    二. 使用公共文件

    1.  TodoInput组件

    1. import React, { useState } from "react";
    2. import "./TodoInput.scss";
    3. import connect from './connect';
    4. import { mapStateTotProps } from "./mapStateToProps";
    5. import { mapDispatchToProps } from "./mapDispatchToProps";
    6.  
    7. // 子组件
    8. const TodoInput = (props) => {
    9.   const [text, setText] = useState("");
    10.   const {
    11.     addTodo,
    12.     showAll,
    13.     showFinished,
    14.     showNotFinish,
    15.   } = props;
    16.  
    17.   const handleChangeText = (e: React.ChangeEvent) => {
    18.     setText((e.target as HTMLInputElement).value);
    19.   };
    20.  
    21.   const handleAddTodo = () => {
    22.     if (!text) return;
    23.     addTodo({
    24.       id: new Date().getTime(),
    25.       text: text,
    26.       isFinished: false,
    27.     });
    28.     setText("");
    29.   };
    30.  
    31.   return (
    32.     <div className="todo-input">
    33.       <input
    34.         type="text"
    35.         placeholder="请输入代办事项"
    36.         onChange={handleChangeText}
    37.         value={text}
    38.       />
    39.       <button onClick={handleAddTodo}>+添加</button>
    40.       <button onClick={showAll}>show all</button>
    41.       <button onClick={showFinished}>show finished</button>
    42.       <button onClick={showNotFinish}>show not finish</button>
    43.     </div>
    44.   );
    45. };
    46.  
    47. export default connect(mapStateTotProps, mapDispatchToProps)(TodoInput);

    2. TodoList组件

    1. import React from "react";
    2. import TodoItem from "./TodoItem";
    3. import _ from "lodash";
    4. import connect from "./connect";
    5. import { mapStateTotProps } from "./mapStateToProps";
    6. import { mapDispatchToProps } from "./mapDispatchToProps";
    7.  
    8. const TodoList = (props) => {
    9.   const { todoList } = props;
    10.  
    11.   return (
    12.     <>
    13.       <p>checckbox-list: </p>
    14.       <div className="todo-list">
    15.         {_.map(todoList, (item) => (
    16.           <TodoItem key={_.get(item, "id")} todo={item || {}} />
    17.         ))}
    18.       </div>
    19.       <hr />
    20.     </>
    21.   );
    22. };
    23.  
    24. export default connect(mapStateTotProps, mapDispatchToProps)(TodoList);

    3. TodoItem组件

    1. import _ from 'lodash';
    2. import React from "react";
    3. import connect from './connect';
    4. import { mapStateTotProps } from "./mapStateToProps";
    5. import { mapDispatchToProps } from "./mapDispatchToProps";
    6.  
    7. // 孙子组件
    8. const TodoItem = (props: any) => {
    9.     const { todo, changeTodo } = props;
    10.     // 改变事项状态
    11.     const handleChange = () => {
    12.         changeTodo(_.get(todo, 'id'));
    13.     }
    14.     
    15.     return (
    16.         <div className="todo-item">
    17.             <input type="checkbox" checked={todo.isFinished} onChange={handleChange} />
    18.             <span style={{ textDecoration: _.get(todo, 'isFinished') ? 'line-through' : 'none' }}>{todo.text}</span>
    19.         </div>
    20.     )
    21. }
    22.  
    23. export default connect(mapStateTotProps, mapDispatchToProps)(TodoItem);

    4. Todo组件:

    1. import React from "react";
    2. import TodoInput from "./TodoInput";
    3. import TodoList from "./TodoList";
    4.  
    5. // 父组件
    6. const Todo = () => {
    7.   return (
    8.     <>
    9.       <TodoInput />
    10.       <TodoList />
    11.     </>
    12.   );
    13. };
    14. export default Todo;

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

    1. import React from "react";
    2. import Todo from './mockConnectProvider/Todo'
    3. import ContextProvider from './mockConnectProvider/ContextProvider'
    4.  
    5. const App: React.FC = () => {
    6.   return (
    7.     <ContextProvider>
    8.       <Todo />
    9.     </ContextProvider>
    10.   );
    11. };
    12.  
    13. export default App;

    效果图如下:

    三. 使用recoil模拟connect

    1.  App.tsx文件

    1. import React from "react";
    2. import Todo from "./mockConnectProvider/Todo";
    3. import { RecoilRoot } from "recoil";
    4.  
    5. const App: React.FC = () => {
    6.   return (
    7.     <RecoilRoot>
    8.       <Todo />
    9.     </RecoilRoot>
    10.   );
    11. };
    12.  
    13. export default App;

    2. Todo.tsx

    1. import React from "react";
    2. import TodoInput from "./TodoInput";
    3. import TodoList from "./TodoList";
    4. import ContextProvider from "./ContextProvider";
    5.  
    6. // 父组件
    7. const Todo = () => {
    8.   return (
    9.     <ContextProvider>
    10.       <TodoInput />
    11.       <TodoList />
    12.     </ContextProvider>
    13.   );
    14. };
    15. export default Todo;

    3. connect.tsx

    1. import React from "react";
    2. import MyContext from "./MyContext";
    3. import _ from "lodash";
    4. import { atom, useRecoilState } from "recoil";
    5.  
    6. const connectState1 = atom({
    7.   key: "connect-state1",
    8.   default: {},
    9. });
    10. // 模拟react-redux的 connect高阶函数
    11. const connect = (mapStateToProps, mapDispatchToProps) => {
    12.   return (Component) => (props) =>
    13.     wrapper(Component, { mapStateToProps, mapDispatchToProps, ...props });
    14. };
    15.  
    16. const useReducer = (store) => {
    17.   const [state, setState] = useRecoilState(connectState1);
    18.  
    19.   const dispatch = (action) => {
    20.     const state1 = store.dispatch(action);
    21.     setState((state0: any) => ({
    22.       ...state0,
    23.       ...state1,
    24.     }));
    25.   };
    26.   return [state, dispatch];
    27. };
    28.  
    29. const wrapper = (Comp, props) => {
    30.   const { mapStateToProps, mapDispatchToProps, ...rest } = props;
    31.  
    32.   return (
    33.     <MyContext.Consumer>
    34.       {(store) => {
    35.         const [state, dispatch] = useReducer(store);
    36.         const dispatchs = mapDispatchToProps(dispatch);
    37.         let states1 = mapStateToProps(state);
    38.  
    39.         return <Comp {...{ ...states1, ...dispatchs, ...rest }} />;
    40.       }}
    41.     </MyContext.Consumer>
    42.   );
    43. };
    44.  
    45. export default connect;

    其他文件直接取一, 二的文件就行

    原理: 

    1) RecoilRoot标签类似redux的Provider标签, 有了它, 方便全局组件通信

    2) useRecoilState钩子可以设置同源下的全局变量, 自然一处修改了, 所有组件都能触发更新

    四. context模拟connect

    1. App.tsx

    1. import React from "react";
    2. import Todo from "./mockConnectProvider/Todo";
    3.  
    4. const App: React.FC = () => {
    5.   return (
    6.     <>
    7.       <Todo />
    8.     </>
    9.   );
    10. };
    11.  
    12. export default App;

    2. Todo.tsx

    1. import React from "react";
    2. import TodoInput from "./TodoInput";
    3. import TodoList from "./TodoList";
    4. import ContextProvider from "./ContextProvider";
    5.  
    6. // 父组件
    7. const Todo = () => {
    8.   return (
    9.     <ContextProvider>
    10.       <TodoInput />
    11.       <TodoList />
    12.     </ContextProvider>
    13.   );
    14. };
    15. export default Todo;

    3. MyContext文件

    1. import React from "react";
    2.  
    3. const MyContext = React.createContext({});
    4.  
    5. export default MyContext

    4. ContextProvider.tsx

    1. import React, { useContext } from "react";
    2. import MyContext from "./MyContext";
    3. import _ from "lodash";
    4. import reducer from "./reducer";
    5.  
    6. // 父组件
    7. const ContextProvider = ({ children }) => {
    8.   const context:any = useContext(MyContext);
    9.   const [state, dispatch] = React.useReducer(reducer, context);
    10.   
    11.   return <MyContext.Provider value={{getState:() => state, dispatch}}>{children}</MyContext.Provider>;
    12. };
    13.  
    14. export default ContextProvider;

    5. connect.tsx

    1. import React from "react";
    2. import MyContext from "./MyContext";
    3. import _ from "lodash";
    4.  
    5. // 模拟react-redux的 connect高阶函数
    6. const connect = (mapStateToProps, mapDispatchToProps) => {
    7.   return (Component) => (props) =>
    8.     wrapper(Component, { mapStateToProps, mapDispatchToProps, ...props });
    9. };
    10.  
    11. const wrapper = (Comp, props) => {
    12.   const { mapStateToProps, mapDispatchToProps, ...rest } = props;
    13.  
    14.   return (
    15.     <MyContext.Consumer>
    16.       {(store) => {
    17.         const dispatchs = mapDispatchToProps(_.get(store, 'dispatch'));
    18.         let states1 = mapStateToProps(_.get(store, 'getState') ? _.get(store, 'getState')(): {});
    19.  
    20.         return <Comp {...{ ...states1, ...dispatchs, ...rest }} />;
    21.       }}
    22.     </MyContext.Consumer>
    23.   );
    24. };
    25.  
    26. export default connect;

    6. 其他需要的组件文件从一, 二中查找,

    注意: 此种方法不需要store文件了

  • 相关阅读:
    前端开发、后端开发与全栈开发：构建现代网站的全面视角
    Python学习笔记第四十五天(NumPy 排序、条件刷选函数)
    【附源码】计算机毕业设计JAVA红河旅游信息服务系统
    创建计划协议、维护创建计划、收货
    VUE 配置环境变量
    B22-9-5
    Vue3 - Suspense 组件介绍及使用方法
    LuatOS-SOC接口文档(air780E)--adc - 数模转换
    集成仿真软件 PLEXOS 9.0 授权永久完美
    在公司逮到一个阿里10年的测试开发，聊过之后大彻大悟...
  • 原文地址：https://blog.csdn.net/qq_42750608/article/details/133915530