（三）、使用dispatch规范setState的流程

标题使用dispatch规范setState的流程

自己实现dispatch：

import React, {useState,useContext} from 'react';

const appContext = React.createContext(null)

export const App = () => {
  const [appState,setAppState] = useState({
    user:{name:'lu',age:18}
  })
  const contextValue = {appState,setAppState}
  return (
    <appContext.Provider value={contextValue}>
      <大儿子 />
      <二儿子 />
      <小儿子 />
    </appContext.Provider>
  )
}
const 大儿子 = () => <section>大儿子<User/></section>
const 二儿子 = () => <section>二儿子<Wrapper/></section>
const 小儿子 = () => <section>小儿子</section>
const User = () => {
  const contextValue = useContext(appContext)
return <div>User:{contextValue.appState.user.name}</div>
}
const reducer = (state,{type,payload}) => {
  if(type === 'updateUser') {
    return {
      ...state,
      user:{
        ...state.user,
        ...payload
      }
    }
  }else{
    return state
  }
}
// const dispatch = (action) => {
//   setAppState(reducer(appState,action))
// }
//由于dispatch拿不到setAppState，所以声明一个组件，将dispatch包住，然后把dispatch再给了这个组件
const Wrapper = () => {
  const {appState,setAppState} = useContext(appContext)
  const dispatch = (action) => {
    setAppState(reducer(appState,action))
  }
  return <UserModifier dispatch={dispatch} state={appState} />
}
const UserModifier = ({dispatch,state}) => {
  const onChange = (e) => {
    dispatch({type:'updateUser',payload:{name:e.target.value}})
  }
  return <div>
    <input value={state.user.name} onChange={onChange}>
    </input>
  </div>
}
export default App;

效果截图：