0

最近我为一个应用程序做了这个，我想知道这是否会被认为是一种不好的做法，或者它是否可以。假设我有一个 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_ACTION，则代码将引发错误。

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

4

1 回答 1

1

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

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

为了让您的减速器“仅减少”，您可以在调度之前进行检查，方法是在动作创建者中测试您的状态。这种模式在 Redux 的关于异步操作的文档中有详细说明。您可以在调用的“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));
        }
    };
}
于 2016-04-01T13:15:41.777 回答