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

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
        }
    }
}