react useReducer加useContext 实现redux全局状态共享及修改

直接代码

创建context文件

import React from react;
interface context {
          
   
  state: any,
  dispatch: any,
}
const Context = React.createContext<context>(null)
export default Context

根组件hooks

import React, {
          
    useMemo, useReducer } from react;
import Context from @/context/index

const reduxData = {
          
   
  name: ,
  pwd: ,
  lan: ch
}
function changeRedux(state, data) {
          
   
  const [key, val] = data
  state[key] = val
  return {
          
   
    ...state
  }
}


export default function MyApp({
          
    Component, pageProps }) {
          
   
  const [state, dispatch] = useReducer(changeRedux, reduxData)
  return (
    <Context.Provider value={
          
   {
          
   
      state,
      dispatch
    }}>
      <Component {
          
   ...pageProps} />
    </Context.Provider>
  )
}

使用（所有组件都可以用）

import React, {
          
    useContext } from react;
import Context from @/context/index
import {
          
    Button } from antd;

const detail = () => {
          
   
  const  {
          
    state, dispatch }  = useContext(Context)
  return (
    <div>
      <Button type="primary" onClick={
          
   () => {
          
   
        dispatch([name,zlaz])
      }}>改变名字</Button>
      <div>name: {
          
   state.name}</div>
    </div>
  )
}

export default detail;

当点击按钮时 全局组件的状态的name更新为zlaz