22 react hooks useReducer, createContext

import React, { useReducer, createContext } from 'react'
let NumContext = createContext()
//useReducer 数据管理器 (类似于redux中的reducer)
export default function Comp17() {
    //useReducer(reducer.js导出的函数，reducer.js中的defaultState)
    //这个方法返回 state对象用于渲染数据 和 dispatch函数用于修改数据
    let [state, dispatch] = useReducer(numReducer, { num: 20 })
    const addclick = () => {
        dispatch({
            type: "toAdd",
            value: 10
        })
    }
    return (
        <NumContext.Provider value={{ state, addclick }}>
            <Title />
            <Btn />
        </NumContext.Provider>
    )
}

function Title() {
    return (
        <NumContext.Consumer>
            {
                ({ state }) => {
                    return (
                        <div>{state.num}</div>
                    )
                }
            }

        </NumContext.Consumer>
    )
}

function Btn() {
    return (
        <NumContext.Consumer>
            {
                ({ addclick }) => {
                    return (
                        <button onClick={addclick}>add</button>
                    )
                }
            }

        </NumContext.Consumer>
    )
}

function numReducer(state, action) {
    let newState = JSON.parse(JSON.stringify(state));
    switch (action.type) {
        case 'toAdd':
            newState.num = newState.num + action.value
            break;
        default:
            break;
    }
    return newState;
}