将值传递给状态 - redux

Question

我在 react 中创建了一个计算器。现在我想使用全局而不是本地状态——我知道这个解决方案可能没有更大的会话，但我想用这种方式学习 redux。我准备了动作和减速器。我不知道如何传递这些值 - 我收到一个错误，结果变量不存在。

本地状态申请链接：
https://codesandbox.io/s/calculator-9dq6i?file=/src/Calc.js:691-705
使用 redux 链接到应用程序：
https://codesandbox.io/s/gifted-shirley-uonew?file=/src/reducers/index.js:0-292
代码： index.js

import React from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import App from "./components/App";
import calculate from "./reducers";

const store = createStore(calculate);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

reducer - index.js

const calculate = (state, action) => {
  switch (action.type) {
    case "ADD_TO_MEMORY":
      result += id;
      return result;

    case "ADD":
      result = parseFloat(result) + parseFloat(prev);
      return result;

    default:
      return result;
  }
};

export default calculate;

动作 - index.js

let prev = "";
let result = "";
let current = "";
let disabled = true;

export const addToMemory = id => ({
  type: "ADD_TO_MEMORY",
  result: result
});

export const add = result => ({
  type: "ADD",
  result: result
});

App.js

import React from "react";
import Counter from "./Counter";

const App = () => (
  <div>
    <Counter />
  </div>
);

export default App;

Counter.js

import React from "react";
import { connect } from "react-redux";
import { addToMemory, add } from "../actions/index";

const Counter = ({ dispatch, result }) => {
  return (
    <p>
      <button id="1" onClick={addToMemory("1")}>
        1
      </button>
      <button id="1" onClick={addToMemory("2")}>
        2
      </button>
      <button id="1" onClick={addToMemory("3")}>
        3
      </button>
      <button id="1" onClick={addToMemory("4")}>
        4
      </button>
      <button id="1" onClick={addToMemory("5")}>
        5
      </button>
      <button id="1" onClick={addToMemory("6")}>
        6
      </button>
      <button id="1" onClick={addToMemory("7")}>
        7
      </button>
      <button id="1" onClick={addToMemory("8")}>
        8
      </button>
      <button id="1" onClick={addToMemory("9")}>
        9
      </button>
      <button id="1" onClick={addToMemory("0")}>
        0
      </button>
      <p>RESULT: {result}</p>
    </p>
  );
};

export default connect()(Counter);

Answer 1

也许我可以在这里澄清一些基本的误解，这可能有助于你走上正轨。

您在正确的轨道上，但需要进行一些更改：

1. 您需要mapDispatchToProps 和mapStateToProps 才能在Counter.js 文件中执行您想要执行的操作。 mapStateToProps 会让你告诉 Redux，“我需要在组件内部访问什么状态？”同样，mapDispatchToProps 会让你告诉 Redux，“我需要在我的组件中访问哪些动作创建者？”

在这里，您大概需要访问 state.result 以获取您的状态，因此您的 mapStateToProps 可能看起来像这样：

const mapStateToProps = (state) => ({
   result: state.result
})

同样，mapDispatchToProps 可能如下所示：

const mapDispatchToProps = {
   addToMemory
}

然后你可以把它链接到：

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

然后，您可以通过 ({result, addToMemory}) 对这些道具进行解构 并在 Counter 组件中使用它们，从而在您的组件中访问它。

1. 你的reducer是一个函数，它接受两个参数：前一个状态和动作对象，并返回一个全新的状态。这不得修改任何现有变量。它必须返回新信息。有关更多信息，请参阅docs。当您调度 addToMemory 时，它在对象中有两个字段：type 和 result。在你的 reducer 中，你可以分别通过 action.type 和 action.result 来访问它们。这就是您收到该错误的原因。

2. 在您的action/index.js 文件中，您的add 动作创建者采用id，但引用result。将参数更改为采用result，这样您也不会出现错误。

在调试一些不同变量的console.log 语句或使用 Redux DevTools Chrome 扩展来帮助调试一些问题时可能会有所帮助。