Question

我使用react-persist将redux状态保存到本地存储。

我想根据持久化状态进行api调用，所以我想在动作持续/ REHYDRATE（由库定义并自行执行）之后立即调度请求调用。

实现这一目标的最佳途径是什么？

Answer 1

试试这个中间件：

let hasRehydrated = false;

const onRehydrationMiddleware = store => next => action => {
    if (!hasRehydrated && action.type === 'persist/REHYDRATE') {
        hasRehydrated = true;
        store.dispatch(callApi());
    } else {
        next(action);
    }
};

您可能不需要记住之前已经发送的persist/REHYDRATE（我不确定它是否只发生过一次），在这种情况下只需删除标记即可。否则它会记住你的中间件所在的模块范围内的事件，这可以作为一个穷人的单身模式工作。

此次活动后基本上不再需要中间件，但我不认为在创建商店后可以将它们丢弃。你可以使用store.subscribe(listener)，但听众没有看到行动。另一种选择是检测基于状态发生的补液，我以某种方式假设改变。然后store.subscribe会起作用，你可以在之后调用api并取消订阅。

Answer 2

发布的答案有误，所以我想改进错误的答案：根据“我想在操作持续/重新执行后立即分派请求调用”这个问题。

import {API_CALL} from "./ACTION/API/index"


let hasRehydrated = false;

const onRehydrationMiddleware = store => next => action => {
    // if this Action happens to be 'persist/REHYDRATE' then follow it up with your 
    // desired Action
    if (!hasRehydrated && action.type === 'persist/REHYDRATE') {
        hasRehydrated = true;
        next(action); // this is to make sure you get the Rehydrated State before making                                 
                      // the store.dispatch(API_CALL()) call
        store.dispatch(API_CALL()); //
    } else {
        // make a call to the next action
        next(action);
    }
};

感谢timotgl的回答

React Redux - 如何在没有Component的情况下执行另一个操作后触发操作

2 个答案: