Reactjs 将数据从redux存储获取到简单函数中的最佳实践方法是什么？

假设我有一个名为

calculateFees

的函数，它需要从后端发送一些数据，例如

consultingFee

。它看起来像：

const calculateFees=itemPrice=>itemPrice*[咨询费]

[consultingFee]

是一个占位符，因为我不知道如何从redux商店获得它。我们还可以说，

calculateFees

要复杂得多，大约有10多种类型的费用，有几十种组件使用。我能想到的选择是：

1） 从调用连接到redux状态的类传入所有费用

（例如，

calculateFees（itemPrice、feeOne、feeTwo、FeeThree等）

2） 复制连接到redux状态的每个类中的代码

3） 导出整个存储（或部分存储），以便

calculateFees

函数可以通过导入访问数据

4） 不确定这是否可行，但创建一个具有静态方法的类，并将其连接到redux存储。然后使用它，例如

MyCompanyFees.calculateFees

5） 创建一个thunk，该thunk单独将数据从状态中取出，并返回计算出的费用。使用它似乎不正确，因为它不是异步的，也不会更新状态树

---

我想获得一些关于最佳实践方法的指导/建议，因为我不喜欢1、2或3。

一个简单的计算/效用函数不应该知道它的数据来自何处，只应该接受它作为参数：

const calculateFees = (itemPrice, consultingFee) => itemPrice * consultingFee

如果数据来自存储，则应在选择器中调用

calculateFees

选择器：

const getCalculatedFees = (state, { itemId }) => {
    const itemPrice = state.items[itemId].price;
    const consultingFee = state.consultingFee;

    return calculateFees(itemPrice, consultingFee);
}

然后，选择器可以由组件或动作相关功能（如thunks和sagas）使用

组成部分：

connect(
    state => ({
        calculatedFees: getCalculatedFees(state)
    })
)(MyComponent)

Thunk：

const myAction = itemId => (dispatch, getState) => {
    const calculatedFee = getCalculatedFees(getState(), { itemId });

    // do stuff...
    dispatch(doSomethingElse(calculatedFee));
}

传奇：

---

我想说，这在很大程度上取决于一个特定的用例，比如这些值（意味着计算函数的输入）可以改变的频率（是购物车类的事情还是更像生成的报告类的事情，当您获取一次数据时，就是这样）以及是否只是每个视图一次计算，或者使用不同的输入进行多个计算（例如，您必须计算表中每一行的费用）

首先，calculation应该是一个单独的函数，它可以获取作为参数所需的所有数据（这样您也可以轻松地对其进行单元测试）不管它是用在React应用程序中还是你在使用Redux或其他什么。如果你认为它会被多次调用，并使用相同的参数，你也可以阅读一个叫做“记忆化”的概念，但我想在大多数情况下，记忆化应该发生在这个函数之外

现在，假设您已经拥有了其余的数据（您提到的

咨询费

占位符）在您的应用商店中，您希望在从后端获得响应后获得计算值。在这种情况下，您可以从应用商店中提取值，如bsapaka的答案所示，并将计算值放入redux应用商店，您可以在需要时访问该应用商店。如果您发出一次请求，就可以显示计算值，这样您就知道您需要再次计算，您将有不同的输入值，并且必须再次调用后端，您不需要缓存结果，尽管我认为如果是这种情况，您根本不应该将计算值存储在您的存储中

您还可以在mapStateToProps函数中进一步使用选择器，该库将对此非常有用（请务必阅读自述文件中的“跨多个组件实例使用道具共享选择器”部分）。这样，您就有了一个组件，该组件可以分派从后端获取所需数据并将其放入redux存储中的操作。在mapStateToProps中，您使用记忆选择器收集所需的所有数据并计算结果，除非输入，否则不会重新计算结果（在本例中，是来自redux存储的相关值）我更喜欢这种方法，因为它减少了redux的副作用，对我来说更具声明性，但我也更喜欢使用redux作为一种原始值的缓存，如果我需要从中派生值，我会使用记忆选择器

function* mySaga({ itemId }) {
    const calculatedFee = yield select(getCalculatedFees, { itemId });

    // ...
}