一. 创作目的

关于这个内容，平时也都会用，但是每次用的时候都要去查询之前的代码，故写出来，方便以后使用的时候，不用去翻阅代码。

二. createContext

createContext 的作用是是创建一个上下文对象，在祖先组件中提供数据，那么所有的后代组件都可以通过 useContext 获取到上下文对象中的数据。

三. useReducer

useReducer其实就是用来改变状态值的，但是在单个组件中，我们完全可以使用 useState 来完成这项工作。那么 useReducer的意义究竟在何处呢? 就是祖先与后代组件和兄弟组件间去改变状态的时候，可以使用 useReducer。并搭配 createContext来使用。
四. 代码实现

import { useReducer, createContext, useContext, Dispatch } from 'react'
import './App.css'

const CountContext = createContext<{ count: number; dispatch: Dispatch<{ type: string }> }>({
  count: 0,
  dispatch: () => {},
})

const reducer = (state: { count: number }, action: { type: string }) => {
  switch (action.type) {
    case 'incr':
      return { count: state.count + 1 }
    case 'decr':
      return { count: state.count - 1 }
    default:
      return state
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, { count: 100 })
  return (
    <CountContext.Provider value={{ ...state, dispatch }}>
      <ChildOne />
      <ChildTwo />
    </CountContext.Provider>
  )
}

const ChildOne = () => {
  const { count, dispatch } = useContext(CountContext)

  return (
    <>
      <h2>Child One Component</h2>
      <h3>{count}</h3>
      <button onClick={() => dispatch({ type: 'incr' })}>count增加</button>
    </>
  )
}

const ChildTwo = () => {
  const { count, dispatch } = useContext(CountContext)
  return (
    <>
      <h2>Child Two Component</h2>
      <h3>{count}</h3>
      <button onClick={() => dispatch({ type: 'decr' })}>count减少</button>
    </>
  )
}

export default App