有没有一种方法可以通过 useReducer 和 Context API 将一个组件的状态访问到另一个组件？

Question

我在 youtube 视频中找到了这段代码，其中 App.js 中的计数器是全局的，并且由应用程序组件中的按钮以及其他组件中的按钮通过点击事件传递函数来控制调度动作的按钮数量

//code for Child component

import { CountContext } from "../App";

function ComponentA() {
    const countContext = useContext(CountContext);

    // const display = () => {
    //  // countContext.countState();
    //  console.log("comp a", countContext.countSState("increment"));
    // };
    return (
        <div>
            Component A {countContext.countState}
            <button onClick={() => countContext.countDispatch("increment")}>
                Increment
            </button>
            <button onClick={() => countContext.countDispatch("decrement")}>
                Decrement
            </button>
            <button onClick={() => countContext.countDispatch("reset")}>Reset</button>
      
            <button onClick={display}>Acessing the app state</button> 
        </div>
    );
}

//code for App.js

export const CountContext = React.createContext();

function App() {
    const [count, dispatch] = useReducer(reducer, initialState);

    const incFunc = () => {
        dispatch("increment");
        console.log("dispatch", count);
        console.log("dispatched", dispatch);
    };

    return (
        <CountContext.Provider value={{ countState: count, countDispatch: dispatch }}>
            <div className="App">
                <CounterOne />
                <CounterTwo />
                <CounterThree />
                {count}
                <button onClick={incFunc}>Inc</button>
                <ComponentA />
                <ComponentB />
                <ComponentC />
                <DataFetchingOne />
                <DataFetchingTwo />
            </div>
        </CountContext.Provider>
    );
}

子组件中的 注释显示函数 是我在访问初始状态的代码中的编辑，我试图在最后一个名为访问应用程序的按钮中调用它状态，但当我单击此按钮时，控制台上没有打印任何内容。我想访问子组件中 App Component 的 inFunc 中正在更新的计数值。我不知道该怎么做。

Answer 1

console.log("comp a", countContext.countState);

countState 不是函数。另外，您在控制台日志语句中有错字。

工作示例：https://codesandbox.io/s/peaceful-violet-01e3x

我将在 24 小时后删除此示例。

有没有一种方法可以通过 useReducer 和 Context API 将一个组件的状态访问到另一个组件？

Is there a way i can get access of a component's state to another component through useReducer and Context API?

reactjs

react-context

use-context

use-reducer