创立主文件
- 根目录
src创立reducer文件夹 - 文件夹下创立
useDataX.js文件
//useDataX.jsimport { createContext, useContext, useReducer } from "react";//? 抛出，创立context上下文，可被拜访（通过DataContext.provider的value）export const DataContext = createContext({});//? 定义初始值(创立useReducer应用)const creatData = { 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 ( <DataContext.Provider value={{ Xdata: dataArr, dispatch }}> {props.children} </DataContext.Provider> );}应用
index.js主入口文件增加包裹标签<GlobalLoadingProvider></GlobalLoadingProvider>
//index.jsimport 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( <React.StrictMode> <GlobalLoadingProvider> <App /> </GlobalLoadingProvider> </React.StrictMode>, document.getElementById("root"));- 获取数据
import { useData } from "./reducer/useDataX";function Test() { const { loading } = useData(); return <div>{loading}</div>;}export default Test;- 组件内批改数据
import React, { useContext } from "react";import { DataContext } from "./reducer/useDataX";function Test() { const { dispatch } = useContext(DataContext); return ( <div> <button onClick={() => { dispatch({ type: "loading", value: true }); }} > 加载 </button> </div> );}export default Test;- 一般js批改数据
import { dispatchRef } from "../reducer/useDataX";dispatchRef.current({type:'loading',value:true});完结
到这里就实现了，援用的时候要留神门路是否正确。当初主文件都是写在一起的，前面业务逻辑简单后能够做一些封装。