reactjs - redux 从状态获取项目或从服务器获取

Question

当谈到在 redux 世界中做事的“正确”方式时，我有很多困惑。假设我有一个包含 foo 列表的 reducer ，并且这些 foo 可以完全加载服务器拥有的有关 foo 的所有信息，或者只是部分加载。

在应用程序中，我有两个 View /状态，一个是 foo 列表，另一个是查看单个 foo 的详细信息。

当我查看 foo 的详细信息时，我想经历几个阶段来确定是否需要从服务器获取/哪些数据。这个决策过程是这样的:

1) 我已直接导航至 foo 的详细信息 View 。 redux 存储中没有关于此 foo 的任何内容，我想从服务器检索有关 foo 的完整信息集。

2)我之前点击了 ListView ，在其中检索有关 foo 的部分信息，当我查看详细信息 View 时，我只想获取该 foo 缺少的附加信息

3) 我之前已经看过某个项目的 foo View ，因此我需要的信息已经在 redux 存储中，因此无需从服务器获取其他任何内容

现在忘记了这样一个事实:redux 存储中的数据如果过时将需要刷新。我对如何通过有条件调度操作来实现这三件事感到困惑。我基本上想调度操作来部分或全部检索数据并设置要显示的所选项目。

当我在详细信息 View 中时，如果我拥有所需的所有信息，我可以将 foo 从商店直接连接到 Prop 。如果不是，我需要调度一个操作来完全或部分检索我的 foo 数据的附加数据。在该操作完成后，reducer 将完全完整的 foo 添加到我的状态中的 foo 列表中，然后我想找到合适的一个并将其分配给组件的 props/state。

虽然我了解我需要实现的部分，但我不知道我应该在何时何地完成此过程的每个部分。

为了方便起见，我们假设每个 foo 都有一个 id，因此在我的状态中查找 foo 就是通过该 id 进行过滤。

希望这是有道理的，欢迎任何帮助，并且对于“从本地状态缓存获取或在丢失时回退到服务器”概念是否有任何常见模式。

克里斯

Answer 1

您可以检查异步操作创建器中当前的 Redux 状态，然后有条件地更新状态。因此，每当您可能需要从服务器更新本地状态时，请调度操作创建者并让它处理决策。您可以在 componentDidMount 中执行此操作。如果您使用 Redux Thunk，您可以像这样传递当前状态:

export default function fetchFooBar() {
    return (dispatch, getState) => {
        const state = getState();

        if (! state.foo.bar) {
            // fetch and dispatch
        }
    }
}