React useContext和useReducer结合使用

父组件代码：

import React, { useEffect, useReducer } from 'react'
export const sateContext = React.createContext() // 创建并导出context
	
export default function Home (props) {
  const [ state, dispatch ] = useReducer(stateReducer,0) // 创建reducer


  function stateReducer (state, action) { // reducer处理函数
    switch (action.type) {
      case 'add':
        return state + 1;
      case 'sub':
        return state - 1;
      default:
        return state;
    }
	return(
		<sateContext.Provider value={{state,dispatch}}>  // 传入需要共享的数据和reducer，需要注意传参的方式，json格式和直接传入
          <Child />
      </sateContext.Provider>


	)
}

子组件代码 ：

/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2021-08-24 14:04:39
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-08-24 14:40:49
 */
import React, { useContext } from 'react'
import {sateContext} from '../Home' // 导入父组件创建的context
import { Button } from 'antd'


export default function Child () {
  const {state,dispatch} = useContext(sateContext)  // 通过usecontext 接收共享数据

  return (
    <div>
      {state}
      <Button onClick={() => {dispatch({type:'add'})}}>加</Button> // 调用dispatch
      <Button onClick={() => {dispatch({type:'sub'})}}>减</Button>
    </div>
  )
}

效果图：