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

也许我可以在这里消除一些基本的误解，这可能有助于您走上正确的道路。

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

您需要同时使用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组件中使用它们，从而在组件内部访问它。

减速器是一个功能，它具有两个参数：先前状态和操作对象，并返回全新状态。不得修改任何现有变量。它必须返回新信息。有关更多信息，请参见docs。调度addToMemory时，它在对象中有两个字段：type和result。在减速器中，您可以分别通过执行action.type和action.result来访问它们。这就是为什么您会收到该错误。
在您的action/index.js文件中，您的add动作创建者使用了id但引用了result。将参数更改为result，这样您就不会出现错误。

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

将值传递给状态-Redux

1 个答案: