如何通过redux-actions来表达REQUEST / START action？

Question

我想使用redux-actions来简化我的react-redux代码，但我有一个问题：

假设我得到了"load“操作，它从远程获取一些主题。所以代码应该是：

const load = createActions('LOAD');

export function fetch() {
  return (dispatch, getState) => {
    dispatch(fetchTopicsRequest());   // <- here is my question.
    return network
      .request('/topics?' + qs.stringify(getState().topics.filter.options))
      .then(network.handleResponse)
      .then(result => dispatch(load(result)))     // <- here I got the topics in the payload
      .catch(error => dispatch(load(error)));     // <- here I got the errors in the payload, in the reducer I check on the "error" field to see if the request successed.
  };
}

我认为用一个操作就能处理结果和错误是很好的。但是如何用同样的动作来表达“请求”状态呢？由于上面的代码我没有弄清楚，所以我不得不做另一个动作"fetchTopicsRequest()"，这使得整个代码看起来很奇怪。

从前面的讨论中，我注意到过去有一个“status”字段，在这种情况下它可能很方便。它跑到哪里去了？或者我只是错过了一些更好的想法？

谢谢

Answer 1

首先，我想纠正你对你所说的行为的理解。在你的例子中，函数fetch()是一个能够分派动作的动作创建者，load(result)和load(error)是实际被分派的动作。

现在，当您正在寻找更好的fetchTopicsRequest()操作实现时，我建议您使用传统的方法来编写操作。在您的例子中，应该是这样的：

dispatch({type: 'FETCHING_TOPICS'});

现在，您可以在您的reducer中捕获此操作，并在topics获取时执行任何操作。

更新：

要处理pending的情况，您可以使用action和reducer的组合。一旦FETCHING_TOPICS操作被分派，那么在reducer中，您可以将pending标记为true，一旦接收到response，您就可以将pending更改为false，如下所示：

function reducer(state={pending: null}, action) {
  switch(action.type) {
    case 'FETCHING_TOPICS':
      return {...state, pending: true};
      break;
    case 'FETCHED_TOPICS':
      return {...state, pending: false, //payload if any};
      break;
    case 'FETCHING_ERR':
      return {...state, pending: false, //payload if any};
      break;
  }
}