从状态获取项目或从服务器获取（Fetch）—— Redux

Question

从状态获取项目或从服务器获取（Fetch）—— Redux

reactjsredux

12

当涉及到 Redux 的“正确”操作方式时，我感到非常困惑。假设我有一个 reducer，用于保存 foo 列表，并且这些 foo 可以完全包含服务器关于 foo 的所有信息或仅部分加载。

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

当我查看 foo 的详细信息时，我希望经过几个阶段来确定是否需要从服务器获取数据，以及需要获取哪些数据。这个决策过程大致如下：

1）我直接导航到 foo 的详细信息视图。Redux store 中没有关于此 foo 的信息，并且我希望从服务器检索关于该 foo 的完整信息。

2）我之前访问了列表视图，其中检索了有关 foo 的部分信息，当我查看详细信息视图时，我只想获取我缺少的有关该 foo 的其他信息。

3）我之前已经查看过某个条目的 foo 视图，因此我需要的信息已经存在于 Redux store 中，因此无需从服务器获取其他任何内容。

现在先忘记Redux存储中的数据如果过期需要刷新这个事实。我对如何通过有条件地触发操作来实现这三个目标感到困惑。基本上，我想要分别发送操作来检索部分或完全检索数据并设置选定项目以进行显示。

当我处于详细视图时，如果我拥有我所需的所有信息，则可以直接将存储中的 foo 连接到 props 上。如果没有，我需要触发一个操作，以完全或部分地检索其他 foo 数据。在完成该操作并且Reducer将完全完成的foo添加到状态中的foo列表之后，我希望找到适当的foo并将其分配给组件的props /状态。

虽然我理解需要完成此过程的各个部分，但我不知道应该在什么时候和哪里执行每个部分。

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

希望这讲得通，欢迎任何帮助。是否有常见的模式用于此“从本地状态缓存提取或回退到服务器（如果丢失）”概念。

Chris

- Owen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rick Jolly · Accepted Answer

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

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

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