react|react hook redux useReducer useContext 实现redux 可在外部js访问 reacthookreduxuseReduceruseContext实现

创建主文件

根目录src创建reducer文件夹
文件夹下创建useDataX.js文件

//useDataX.jsimport { createContext, useContext, useReducer } from "react"; //? 抛出，创建context上下文，可被访问（通过DataContext.provider的value） export const DataContext = createContext({}); //? 定义初始值(创建useReducer使用) const creatData = https://www.it610.com/article/{ loading:false }//? 抛出，方法可以在普通js中访问 export function dispatchRef(value){ return { current: value }; }//? 这样的形式就叫reducer (通过useReducer传来的值，接收到state：原始值（改变creatData后）、action：变化后的值（dispatch传来的值) function reducer(state, action) { if(action.type==='loading'){ let stateClone = {...state}// 这里需要深拷贝复制，可以用JSON.parse(JSON.stringify(state))转化一下 stateClone.loading=action.value return stateClone } }//? 抛出，可获取DataContext里的value值 export function useData(){ const { Xdata } = useContext(DataContext); return Xdata; }; // 主函数（可包裹根组件） export function GlobalLoadingProvider(props) { //todo useReducer 接受一个 reducer 函数作为参数，reducer 接受两个参数一个是 state 另一个是 action 。 //todo 然后返回一个状态 count 和 dispath，count 是返回状态中的值，而 dispatch 是一个可以发布事件来更新 state 的。 //? 修改dispath后更新dataArr！ const [dataArr, dispatch] = useReducer(reducer, creatData); //? 普通js中访问 dispatchRef.current = dispatch; return ( {props.children} ); }

使用

index.js主入口文件添加包裹标签

//index.js import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App.jsx"; // import reportWebVitals from './reportWebVitals'; import { GlobalLoadingProvider } from "./reducer/useDataX"; ReactDOM.render( , document.getElementById("root") );

获取数据

import { useData } from "./reducer/useDataX"; function Test() { const { loading } = useData(); return {loading}; } export default Test;

组件内修改数据

import React, { useContext } from "react"; import { DataContext } from "./reducer/useDataX"; function Test() { const { dispatch } = useContext(DataContext); return (); } export default Test;