0

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

假设我有“加载”操作，它从远程获取一些主题。所以代码是：

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()”，这使得整个代码看起来很奇怪。

从早期的讨论中我注意到曾经有一个“状态”字段，在这种情况下它可能会很方便。它去哪儿了？还是我错过了一些更好的主意？

谢谢

4

1 回答 1

0

首先，我想纠正您对您所谓的行动的理解。在您的情况下，该函数fetch()是一个能够调度动作的动作创建者，load(result)并且load(error)是被调度的实际动作。

现在，由于您正在寻找更好的fetchTopicsRequest()操作实现方式，因此我建议您使用传统的方式来编写操作。在你的情况下，这将是这样的：

dispatch({type: 'FETCHING_TOPICS'});

现在你可以在你的 reducer 中捕获这个动作，并在你topics获取的时候做任何事情。

更新：

要处理这种pending情况，您可以使用 action 和 reducer 的组合。一旦FETCHING_TOPICS动作被调度，然后在你的减速器中，你可以标记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;
  }
}
于 2017-10-12T13:11:36.153 回答