react.js - React 状态管理 Reducer 的 dispatch 不是一个方法？

Question

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

import { useParams, useLocation } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { PageProvider, usePageContext } from './core/Context'

export default function Page() {

    const [list, setList] = useState<any[]>([])
    let [resource, setResource] = useState<object>({ text: "啊啊啊" })

    const dispatchPage = usePageContext();


    return <PageProvider>
        <button onClick={() => dispatchPage({ text: "修改成功"}) }>点击变化</button>
        <div>{list.map(e => e)}</div>
    </PageProvider>

}

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

const PageContext = createContext({})
export function usePageContext() {
    return useContext( PageContext );
}

function tasksReducer(tasks: any, action: any) {

    return { text: action.text }
}

export function PageProvider({ children } : any) {

    const [tasks, dispatch] = useReducer(
        tasksReducer,
        { text: "上下文" }
    );

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

Answer 1

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