使用 Redux 强制一个动作在另一个动作之前被调用

Question

最近我为一个应用程序这样做了，我想知道这是否会被视为不好的做法，或者是否可以。假设我有一个 reducer 监听两个动作：

switch (action.type) {
  case 'PRE_FETCH_ACTION':
    return Object.assign({}, state, {value: action.value, isAllowed: true})
  case 'FETCHED_SUCCESS':
    if (!state.isAllowed) {
      throw Error('You did not dispatch PRE_FETCH_ACTION before fetching!');
    }
    return Object.assign({}, state, {data: action.data, isAllowed: false})
}

所以流程是：

• 我发送PRE_FETCH_ACTION
• 我对外部 API 进行 fetch 调用
• 当服务响应返回时，它调度FETCHED_SUCCESS

如果有人尝试在不分派PRE_FETCH_ACTIONfirst 的情况下获取数据，代码将抛出错误。

好的，所以这很好用。正如我所说，我担心这是否会被认为是一种糟糕的模式。为什么我会这么认为？因为 isAllowed 状态是 reducer 内部的，它不会影响任何组件的渲染方法。

Answer 1

我认为在你的应用程序状态中有这样的“技术”标志是可以的。

在您的情况下，您希望确保按特定顺序分派操作，这定义了您的应用的特定行为（例如，当数据获取开始时在屏幕上显示加载程序）。这就是为什么我认为您的“技术”标志最终会管理您的 UI。

要让您的减速器“仅减少”，您可以在调度之前进行检查，方法是在动作创建者中测试您的状态。这个模式在 Redux 关于async actions 的文档中有详细说明。您可以在调用的“thunk”操作创建器中执行此操作，而不是调用同步操作“fetchedSuccess”，如下所示：

function toFetchedSuccess(data) {  // "thunk" action creator
    return (dispatch, getState) => {
        const state = getState();  // current state
        if(!state.isAllowed) {
            console.error(
                'You did not dispatch PRE_FETCH_ACTION before fetching!');
            return Promise.resolve();  // nothing to do
        } else {
            return dispatch(fetchedSuccess(data));
        }
    };
}