关于javascript:react-hook-redux-useReducer-useContext-实现redux-可在外部js访问

创立主文件

1. 根目录 src 创立 reducer 文件夹
2. 文件夹下创立 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>
  );
}

应用

1. 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")
);

2. 获取数据

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

3. 组件内批改数据

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;

4. 一般 js 批改数据

import {dispatchRef} from "../reducer/useDataX";
dispatchRef.current({type:'loading',value:true});

完结

到这里就实现了，援用的时候要留神门路是否正确。当初主文件都是写在一起的，前面业务逻辑简单后能够做一些封装。