javascript - 我应该如何访问 react-redux 应用程序中的服务

Question

我正在学习 React 和 Redux。我读了很多书并创建了一个基本的应用程序。我现在想创建一个简单的计算器应用程序作为更高级的培训练习。

计算器应用程序将非常基础，即。用于数字和操作的按钮以及用于显示正在键入的数字或运行总计的简单文本字段。它将模拟一个简单的桌面计算器。也就是说，如果您单击 5 按钮，文本字段中将出现一个 5。如果现在单击 6，显示将变为 56。依次单击 +、3、1，现在显示为 31。单击 = 将显示 87。

计算引擎(Calculator)的业务逻辑是一个服务，可以与应用本身分离。应用程序中应该只有一个计算器实例。我想知道的是如何使计算器可用于应用程序，尤其是。在 reducer 中。计算器需要保持某种状态，例如。到目前为止输入了多少数字。

在 React-Redux 中，状态由单个对象表示，并通过商店提供。计算器应该是状态的一项吗？ (另一项是要显示的当前值。)鉴于计算器永远不会改变，即。它总是指向同一个引用，这有意义吗？ (计算器的内部状态会发生变化，但这在很大程度上对应用程序是不可见的。)这是否意味着我的 reducer 将始终接受计算器作为状态并将其传回？我不想每次都复制一份。

还是通过某种单例使计算器可用更好？

或者还有其他更符合 React-Redux 习惯用法的方法吗？

Answer 1

我想在 react/redux 中使用计算器之类的东西，我会在我的 reducer 中创建一个 case 来处理按下的“=”按钮，当前值和表达式都通过 action 对象传递。我会设想这样的 reducer :

const initialState = {
  totalValue: 0
};

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case EQUAL_PRESSED:
      // Do your work here to call your calculator service.
      // you can pass in action.currentTotal and action.expressionToEval
      // to whatever functions will do the actual work and return a new 
      // total.
      var newTotal = calcEngine(action.currentTotal, action.expressionToEval);
      return {
        ...state,
        totalValue: newTotal
      };
  }
}

export function equalPressed(currentTotal, expressionToEval) {
  return {
    type: EQUAL_PRESSED,
    currentTotal: currentTotal,
    expressionToEval: expressionToEval
  };
}

然后在我的 React 组件中，我将访问 redux 状态树并获取新的 totalValue 以在您显示结果的任何地方显示。