Question

对于在redux世界中做事的'正确'方式，我有很多困惑。假设我有一个包含foos列表的reducer，并且这些foos可以完全加载服务器有关foo或部分加载的所有信息。

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

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

1）我已直接导航到foo的详细信息视图。还没有关于这个foo的redux商店，我想从服务器上检索有关foo的全套信息。

2）我之前点击列表视图，在那里我检索有关foo的部分信息，当我查看详细信息视图时，我只想获取我缺少的那个foo的附加信息

3）我之前看过一个项目的foo视图，所以我需要的信息已经存在于redux存储中，因此无需从服务器中获取任何其他信息

现在忘记了如果陈旧的话，redux商店中的数据需要刷新。我对如何通过有条件的调度操作实现这三件事感到困惑。我基本上想要调度动作以部分或完全检索数据并设置要显示的选定项目。

当我在详细信息视图中时，我可以将foo从商店直接连接到道具，如果我有我需要的所有信息。如果不是，我需要调度一个动作来完全或部分检索我的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
        }
    }
}

redux从州获取项目或从服务器

1 个答案: