如何React的函数式组件中使用useContext和useReducer来简单替代redux

1. 首先是user.jsx

import React, { createContext, useReducer } from 'react'

const UserContext = createContext()
const user = {
    username: '',
    email: ''
}

export const UPDATE_USER = 'UPDATE_USER'
export const UPDATE_USERNAME = 'UPDATE_USERNAME'
export const UPDATE_EMAIL = 'UPDATE_UEMAIL'
export const RESET_USER = 'RESET_USER'

const userReducer = (state=user, action={type: '', payload: {}})=>{
    switch(action.type){
        case UPDATE_USER:
            return {...action.payload}
        case UPDATE_USERNAME:
            return {...state, username: action.payload}
        case UPDATE_EMAIL:
            return {...state, email: action.payload}
        case RESET_USER:
            return {...user}
        default:
            return state

    }
}

export default function UserContext(props) {
    const [state, dispatch] = useReducer(user, userReducer)

    return (
        <UserContext.Provider value={{state, dispatch}}>
            {props.children}
        </UserContext.Provider>
    )
}

2. 然后是App.jsx中引入

import React from 'react'
import UserContextWrapper from './user'

export default function App() {

  return (
    <UserContextWrapper>
        <div>App</div>
    </UserContextWrapper>
  )
}

3. 最后是child.jsx中使用

import React, { useContext } from 'react'
import { UPDATE_EMAIL, UserContext } from './user'


export default function Child() {
    const userContext = useContext(UserContext)
    const {username} = userContext.state

    return (
        <div>
            <div>username:{username}</div>
            <span>email: </span>
            <input type="text" onChange={(value)=>userContext.dispatch(UPDATE_EMAIL, value)} />
        </div>
    )
}