javascript - 使用 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 进行提取调用
• 当服务响应返回时，它会调度 FETCHED_SUCCESS

如果有人尝试在没有先调度 PRE_FETCH_ACTION 的情况下获取数据，代码将抛出错误。

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

Answer 1

我认为在您的应用程序状态中拥有此类“技术”标志是可以的。

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

为了让您的 reducer “仅减少”，您可以在分派(dispatch)之前通过在操作创建器中测试您的状态来进行检查。 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));
        }
    };
}