React hooks useContext、useReducer结合使用实现数据状态共享

 功能：

点击Child1中的两个按钮，改变Child2、Child3的数据。

目录：

App.js:

import './App.css';
import ContextReducer from './contextReducer/ContextReducer'

function App() {
  return (
    <ContextReducer />
  );
}

export default App;

 ContextReducer.js（父组件）：

import React, { useReducer } from 'react'
import Child1 from './children/Child1'
import Child2 from './children/Child2'
import Child3 from './children/Child3'

const reducers = (prevState, action) => {
  console.log(prevState, action);
  let newState = { ...prevState }
  switch (action.type) {
    case 'changeA':
      newState.a = 6
      return newState
    case 'changeB':
      newState.b = 7
      return newState
    default:
      return newState
  }
}

const initialStates = {
  a: 0,
  b: 1
}

export default function ContextReducer() {
  const GlobalContext = React.createContext();
  const [state, dispatch] = useReducer(reducers, initialStates);
  return (
    <GlobalContext.Provider value={{
      state,
      dispatch
    }}>
      <Child1 GlobalContext={GlobalContext} />
      <Child2 GlobalContext={GlobalContext} />
      <Child3 GlobalContext={GlobalContext} />
    </GlobalContext.Provider>
  )
}

Child1（子组件）：

import React, {useContext} from 'react'

const Child1 = (props) => {
  const {GlobalContext} = props;
  console.log(GlobalContext);
  const {state, dispatch} = useContext(GlobalContext)

  return (
    <div>
      Child1
      <button onClick={() => {
        dispatch({type: 'changeA'})
      }}>改变a</button>
      <button onClick={() => {
        dispatch({type: 'changeB'})
      }}>改变b</button>
      <p>
        {state.num}
      </p>
    </div>
  )
}

export default Child1

Child2（子组件）：

import React, {useContext} from 'react'

const Child1 = (props) => {
  const {GlobalContext} = props;
  const {state, dispatch} = useContext(GlobalContext)

  return (
    <div>
      ChildA
      <p>
        {state.a}
      </p>
    </div>
  )
}

export default Child1

Child3（子组件）：

import React, {useContext} from 'react'

const Child1 = (props) => {
  const {GlobalContext} = props;
  const {state, dispatch} = useContext(GlobalContext)

  return (
    <div>
      ChildB
      <p>
        {state.b}
      </p>
    </div>
  )
}

export default Child1

运行结果：

初始状态：

 点击改变a按钮：

 点击改变b按钮：