首页 > 其他分享 >React使用createContext搭配useReducer模拟Redux

React使用createContext搭配useReducer模拟Redux

时间:2023-03-17 10:45:34浏览次数:36  
标签:createContext VariantOne const useReducer globalStateDispatch React state global

1.准备

import React, { useReducer } from 'react';
// import { useIntl } from 'react-intl'; // 用于国际化 后续在写入暂时无效

2.用于存放数据的函数

const initialGlobalState = {
  VariantOne: null,
  variantTow: null,
};

3.用于更改数据的函数

const globalStateReducer = (state, action) => {
  switch (action.type) {
    case 'setAvatarUrl': { // 用于定义修改是的键
      const { avatarUrl } = action; // 用于接收修改

      return {
        ...state,
        avatarUrl,
      };
    }
    case 'setSortsName': {
      const { SortsName } = action;

      return {
        ...state,
        SortsName,
      };
    }
    case 'setVariantOne': {
      const { VariantOne } = action;

      return {
        ...state,
        VariantOne,
      };
    }
    case 'setVariantTow': {
      const { VariantTow } = action;

      return {
        ...state,
        VariantTow,
      };
    }
    default:
      return state;
  }
};

4.导出

export const GlobalStateProvider = ({ children }) => {
  const [globalState, globalStateDispatch] = useReducer(globalStateReducer, initialGlobalState);
  // const intl = useIntl();

  return (
    <GlobalStateContext.Provider value={{ globalState, globalStateDispatch, intl }}> // 无视intl
      {children}
    </GlobalStateContext.Provider>
  );
};

const GlobalStateContext = React.createContext({});

export default GlobalStateContext;

5.调用 放到全局让他包起来

import { GlobalStateProvider } from 'components/GlobalStateContext';

<GlobalStateProvider> //包起来 里面的组件就可以使用
    <AppComponent />
</GlobalStateProvider>

6.更改和获取

1.类组件

// 修改
this.context.globalStateDispatch({ type: 'setVariantOne', VariantOne: false });
this.context.globalStateDispatch({ type: 'setVariantTow', VariantTow: false });

// 获取使用
this.context.globalState.VariantOne;
this.context.globalState.VariantTow;

globalState与globalStateDispatch 为上面定义导出的函数

2.函数组件

// 在获取前先把结构useContext出来
import React, { useContext } from 'react';

//使用时
const Context = useContext(GlobalStateContext);

// 更改     
Context.globalStateDispatch({ type: 'setVariantOne', VariantOne: true }); // 定义修改
Context.globalStateDispatch({ type: 'setVariantTow', VariantTow: true });

// 获取
Context.globalState.VariantOne;
Context.globalState.VariantTow;

 

标签:createContext,VariantOne,const,useReducer,globalStateDispatch,React,state,global
From: https://www.cnblogs.com/Dluea/p/17225748.html

相关文章

  • react定义图片预览
    1.控制图片的信息imgScale:'100%',//图片放大缩小imgTransform:'',//旋转imgCurrent:0,//当前的旋转x:0,//x移动y:0,//y移动2.执行用的函数......
  • react hooks + ts 封装组件
    reacthooks+ts组件封装简介在react使用ts封装组件,需要注意类型,使用forwardRef方法包起来子组件import*asReactfrom"react";import"./style.scss";interf......
  • react警告:Warning: [antd: Menu] children will be removed in next major version. P
    这是由于antv4.20+优化了导航菜单Menu的使用方式,采用优化后的方式使用菜单组件就可以了。更新前:<MenuonClick={this.handleClick}style={{wi......
  • react项目中遇到的小问题汇总
    sessionStorage在刷新的时候不会销毁,在窗口关闭的时候才销毁默认情况下,useEffect在每次渲染之后执行文件上传上传文件通过form表单拿到的数据是解析后的,直接拿Upload.D......
  • React之useEffect简记
    一.作用useEffectHook相当于componentDidMount,componentDidUpdate和componentWillUnmount这三个reactclass的生命周期函数的组合。componentDidMount:组件挂载;compone......
  • 如何快速生成一个react的前端项目?
     要快速生成一个React前端项目,可以使用脚手架工具来进行创建。最常用的脚手架工具是CreateReactApp。首先,你需要确保在本地已经安装了Node.js和npm(或者yarn)。......
  • VUE的setup、ref、reactive和代理数据的使用
    一.VUE的setup、ref、reactive和代理数据的使用1.1setup和ref先来实现一个简单的点击按钮,数字增加的案例:需求:页面打开后可以直接看到一个数据,点击按钮后,该数据可以发生......
  • WEB前端开发-蚂蚁金服电话面试-React
        记录一下自己面试的感触,上周投了杭州的蚂蚁金服,然后第二天早上的时候,就收到了面试的邀请,晚上7点到9点等待面试,自己心里面还是慌慌的,当时自己在上班,下午一下班就......
  • 前端react面试题合集
    React的工作原理React会创建一个虚拟DOM(virtualDOM)。当一个组件中的状态改变时,React首先会通过"diffing"算法来标记虚拟DOM中的改变,第二步是调节(reconciliati......
  • 详解React的Transition工作原理原理
    Transition使用姿势Transition是react18引入的新概念,用来区分紧急和非紧急的更新。紧急的更新,指的是一些直接的用户交互,如输入、点击等;非紧急的更新,指的是UI界面......