创立主文件
- 根目录
src
创立reducer
文件夹 - 文件夹下创立
useDataX.js
文件
//useDataX.js
import {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.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(
<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});
完结
到这里就实现了,援用的时候要留神门路是否正确。当初主文件都是写在一起的,前面业务逻辑简单后能够做一些封装。