Dispatch 不是函数 useContext/useReducer React hooks

Question

我的 Home.js 组件似乎根本看不到调度功能。你们知道为什么吗？我对 redux 中的 redux 风格状态管理内容有点陌生。

我不断收到错误“TypeError: dispatch is not a function”

App.js

import React from 'react';
import { HashRouter, Route } from 'react-router-dom';

import Home from './pages/Home';
import Start from './pages/Start';
import Result from './pages/Result';

import RPSContextProvider from './contexts/RPSContext';

const App = () => {
    return (
        <HashRouter>
            <RPSContextProvider>
                <Route exact path="/" component={Home} />
                <Route path="/start" component={Start} />
                <Route path="/result" component={Result} />
            </RPSContextProvider>
        </HashRouter>
    );
};

export default App;

Home.js

import React, { useRef, useContext } from 'react';
import { RPSContext } from '../contexts/RPSContext';
import './home.css';

const Home = (props) => {
    const { state, dispatch } = useContext(RPSContext);
    const playerNameEntry = useRef();

    const handleClick = () => {
        if (!isStringEmpty(playerNameEntry.current.value)) {
            dispatch({ type: 'SET_NAME', state: playerNameEntry.current.value });
            props.history.push({
                pathname: '/start'
            });
            console.log(dispatch);
        }
    };

    const isStringEmpty = (string) => string.trim().length === 0;

    return (
        <div className="app-container">
            <h1>
                You dare battle me at
                <br />
                Rock, Paper, Scissors?
                <br />
                You got no chance, kid!
            </h1>
            <p>What's your name, ya chancer?</p>
            <input type="text" onKeyPress={(e) => handleKeyPress(e)} ref={playerNameEntry} />
            <button onClick={handleClick}>Start</button>
        </div>
    );
};

export default Home;

RPSContext.js

import React, { createContext, useReducer } from 'react';
import { RPSReducer } from '../reducers/RPSReducer';

export const RPSContext = createContext();

const RPSContextProvider = (props) => {
    const [ state, dispatch ] = useReducer(RPSReducer, { playerName: '' });

    return <RPSContext.Provider value={{ state, dispatch }}>{props.children}</RPSContext.Provider>;
};

export default RPSContextProvider;

RPSReducer.js

export const RPSReducer = (state, action) => {
    switch (action.type) {
        case 'SET_NAME':
            return { playerName: action };
        default:
            throw new Error();
    }
};

基本上，作为第一步，我只想设置条目的名称。我知道这对于我正在做的事情来说是相当多的代码，但我只是想尝试一下 useReducer 和 useContext 以便我可以在 React 中学习所有这些新东西。

Answer 1

我通过添加解决了这个问题

    switch (action.type) {
        case 'SET_NAME':
            return { ...state, playerName: action.payload }

在我的 reducer 中，在 Home.js 中将我在其中的状态键更改为有效负载。不是 100% 确定它是否具有相同的名称会影响任何东西，但命名它的有效负载会更容易混淆。

    const handleClick = () => {
        if (!isStringEmpty(playerNameEntry.current.value)) {
            dispatch({ type: 'SET_NAME', payload: playerNameEntry.current.value });

Answer 2

用 AppContext.Provider 包装整个应用程序并传递状态和调度，如下所示

<AppContext.Provider value={{ state, dispatch }}>
  <div className="App">
    <Compo />
  </div>
</AppContext.Provider>