react中useReducer使用

在react项目中，我们可以使用redux状态全局化，在开发中只需要维护单一的数据源即可解决多组件数据使用，现在我们多使用的是hook来开发，react官方中提供了useReducer + Provider来实现类似的功能；

初始化Store.ts

import { createContext } from 'react'

export interface IStateProps {
    name: string
}
export interface IActionProps {
    type: string
    payload?: any
}

export const state = {
    name: 'xhh'
}

export const Reducer = (state: IStateProps, action: IActionProps) => {
  switch (action.type) {
    case 'CHANGE_NAME':
      return { ...state, name: action.payload }
    default:
      throw new Error('reducer没有当前type方法')
  }
}

// eslint-disable-next-line @typescript-eslint/no-empty-function
export const context = createContext({ state, dispatch: (obj: IActionProps) => {} })

export const Provider = context.Provider
export const Consumer = context.Consumer

父组件使用provider

// 引入
import { Reducer, state as initalState, Provider } from './Store'
const Parent:FC<any> = (props) => {
  const [state, dispatch] = useReducer(Reducer, initalState)
  return <Provider value={{state, dispatch}}>
                Index
            </Provider>
}

子组件使用context

import React, { useContext } from 'react'
import { context } from './Store'
const Child:FC<any> = (props) => {
  const { state, dispatch } = useContext(context)
  return <>
    {state.name}
    <button onClick={() => dispatch({type: 'CHANGE_NAME‘, payload: 'hello xhh'})}>change</button>
    </>
}