手写 redux

1. 封装reducer：对数据的操作封装到reducer里

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

const appContext = React.createContext(null)
const App = () => {
  const [appState, setAppState] = useState({
    user: {name: 'frank', age: 18}
  })
  return (
    <appContext.Provider value={{appState, setAppState}}>
      <大儿子/>
      <二儿子/>
      <幺儿子/>
    </appContext.Provider>
  )
}
const 大儿子 = () => <section>大儿子<User/></section>
const 二儿子 = () => <section>二儿子<UserModifier/></section>
const 幺儿子 = () => <section>幺儿子</section>

const User = () => {
  const {appState} = useContext(appContext)
  return <div>User:{appState.user.name}</div>

}

const reducer = (state, actionType, actionData) => {
  if (actionType === 'updateUser') {
    return {
      ...state,
      user: {
        ...state.user,
        ...actionData
      }
    }
  } else {
    return state
  }
}

const UserModifier = () => {
  const {appState, setAppState} = useContext(appContext)
  const onChange = (e) => {
    const newState = reducer(appState, 'updateUser', {name: e.target.value})  //目标
    setAppState(newState)
  }
  return <div>
    <input value={appState.user.name}
           onChange={onChange}/>
  </div>
}

export default App

2. 封装dispatch，需要给组价一个wrapper

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

const appContext = React.createContext(null)
const App = () => {
  const [appState, setAppState] = useState({
    user: {name: 'frank', age: 18}
  })
  return (
    <appContext.Provider value={{appState, setAppState}}>
      <大儿子/>
      <二儿子/>
      <幺儿子/>
    </appContext.Provider>
  )
}
const 大儿子 = () => <section>大儿子<User/></section>
const 二儿子 = () => <section>二儿子<Wrapper/></section>
const 幺儿子 = () => <section>幺儿子</section>
const User = () => {
  const {appState} = useContext(appContext)
  return <div>User:{appState.user.name}</div>

}
const reducer = (state, {type, payload}) => {
  if (type === 'updateUser') {
    return {
      ...state,
      user: {
        ...state.user,
        ...payload
      }
    }
  } else {
    return state
  }
}

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}/>
  </div>
}

export default App

• 封装高阶组件(redux里叫做connect)，返回一个Wrapper，并且可以透传所有porps，通过{...props}

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

const appContext = React.createContext(null)
const App = () => {
  const [appState, setAppState] = useState({
    user: {name: 'frank', age: 18}
  })
  return (
    <appContext.Provider value={{appState, setAppState}}>
      <大儿子/>
      <二儿子/>
      <幺儿子/>
    </appContext.Provider>
  )
}
const 大儿子 = () => <section>大儿子<User/></section>
const 二儿子 = () => <section>二儿子<UserModifier x={'x'}>这是内容</UserModifier></section>
const 幺儿子 = () => <section>幺儿子</section>
const User = () => {
  const {appState} = useContext(appContext)
  return <div>User:{appState.user.name}</div>

}
const reducer = (state, {type, payload}) => {
  if (type === 'updateUser') {
    return {
      ...state,
      user: {
        ...state.user,
        ...payload
      }
    }
  } else {
    return state
  }
}

const connect = (Component) => {
  return (props) => {
    const {appState, setAppState} = useContext(appContext)
    const dispatch = (action) => {
      setAppState(reducer(appState, action))
    }
    return <Component {...props} dispatch={dispatch} state={appState}/>
  }
}

const UserModifier = connect(({dispatch, state, x ,children}) => {
  const onChange = (e) => {
    dispatch({type: 'updateUser', payload: {name: e.target.value}})
  }
  return <div>
    {children}
    <input value={state.user.name}
           onChange={onChange}/>
  </div>
})

export default App