React 状态管理 Reducer 的 dispatch 不是一个方法？

Question

• https://codesandbox.io/s/ww49ef?file=/TasksContext.js&utm_med...
• 模仿以上官网的示例：出现了 dispatch is not a function 报错？请问为何？

import { Button } from 'antd-mobile'
import { usePageContext, usePageData } from '../core/Context'

export default function C_Button ({ text = "啊啊啊" }) {
    const title: any = usePageContext()
    const dispatch = usePageData();

    return <>
        <Button block color='primary' size='large' >{text}</Button>
        <Button block color='success' size='mini' onClick={() => dispatch({ text: "变化成功!!!!" })} >{title.text}</Button>
    </>

}

import { createContext, useContext, useReducer } from "react";

const PageContext = createContext({})

const PageData = createContext({})

export function PageProvider({ children } : any) {

    const [tasks, dispatch] = useReducer(
        tasksReducer,
        { text: "这是初始化" }
    );

    return (
        <PageContext.Provider value={tasks}>
            <PageData.Provider value={dispatch}>
                {children}
            </PageData.Provider>
        </PageContext.Provider>
    );
}

export function usePageContext() {
    return useContext( PageContext );
}

export function usePageData() {
    return useContext( PageData );
}

export function tasksReducer(tasks: any, action: any) {
    return { text: action.text }
}

Answer 1

context的值来源于provider上的value属性。你的PageContext.Provider的value是tasks也就是你usePageContext得到的是这个值，而不是dispatch这个函数