1

这是一个包含以下示例代码的 CodeSandbox，linter 突出显示了一些问题：https ://codesandbox.io/s/react-repl-bw​​2h1

下面是我正在尝试做的一个基本示例。在容器组件中，我有一个AppContext为子组件提供状态的上下文，<ChildConsumer />并且<ChildDispatcher />.

<ChildConsumer />组件使用 接收此状态，useContext这似乎按预期工作。

在里面<ChildDispatcher />，我试图在单击按钮时调度一个动作。为此，我创建了一个reducer处理动作的减速器。我还在这里设置了 useReducer 来接收reducer初始store状态。

当我单击按钮时，什么也没有发生。我期望发生的是，dispatch既接收state拉出useReducer的对象，也接收action对象，并将它们传递给减速器。reducer 应该看到BUTTON_CLICKED收到了 type 的 action，并且应该返回一个包含旧状态的新状态以及一个附加'goodbye'项。然后，子组件<ChildConsumer />应该使用这个新状态重新渲染。

import React, { createContext, useContext, useReducer } from "react";
import ReactDOM from "react-dom";

const store = [""];
const AppContext = createContext(store);

const ChildDispatcher = () => {
  const reducer = (state, action) => {
    switch (action.type) {
      case "BUTTON_CLICKED":
        return [...state, "goodbye"];
      default:
        return state;
    }
  };

  const [state, dispatch] = useReducer(reducer, store);
  const handleClick = () =>
    dispatch(state, {
      type: "BUTTON_CLICKED"
    });
  return <button onClick={handleClick}>press me</button>;
};

const ChildConsumer = () => {
  const [consumer] = useContext(AppContext);
  return <div>{consumer}</div>;
};

const App = () => {
  return (
    <div>
      <h1>Using Context and useReducer</h1>
      <AppContext.Provider value={["hello"]}>
        <ChildConsumer />
        <ChildDispatcher />
      </AppContext.Provider>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
4

2 回答 2

4

我对你的代码做了一个小的修改。

你必须像下面这样通过调度。Dispatch 需要一个 object 类型的参数。

const handleClick = () => dispatch({ type: "BUTTON_CLICKED" });

然后可以像这样访问这个状态。

const ChildDispatcher = () => {
  const reducer = (state, action) => {
    switch (action.type) {
      case "BUTTON_CLICKED":
        //action.state      // like this
        return [...state, "goodbye"];
      default:
        return state;
    }
  };

  const [state, dispatch] = useReducer(reducer, store);
  const handleClick = () =>
    dispatch(state, {
      type: "BUTTON_CLICKED"
    });
  return <button onClick={handleClick}>press me</button>;
};

默认情况下，react 会将状态传递给调度程序。但是如果你想传递一些数据，你可以将它添加到对象中并将该对象传递给调度。

const handleClick = () => dispatch({ type: "BUTTON_CLICKED", state: state });

代码沙盒：

编辑反应 repl

于 2020-03-07T17:32:37.407 回答
2

这个问题很少：

  1. ChildDispatch 状态仅对 ChildDispatch 可用，不会影响上层组件。要更改上下文值，您需要在该组件中提供调度并制作自定义挂钩（或将其作为道具传递）以在 ChildDispatch 中使用它。

  2. 调用调度时不要传递状态。useReducer 将为您处理。只需发送动作。

这就是数据流应该有一个单向方向的意思。父组件控制共享状态/管理状态的方式，子组件使用它来呈现/执行操作。

于 2020-03-07T17:37:40.153 回答