将回调函数传递给redux异步操作是否被认为是好的做法?



我想显示成功/错误响应的不同通知栏,我将两个回调传递给react组件中的redux异步操作,如下所示:

<Button
  onClick={e => this.props.actions.asyncAction(item, this.showSuccessBar, this.showErrorBar)}
/>

其中asyncAction看起来像这样:

export function asyncAction(item, successCallback, errorCallback) {
  return (dispatch, getState) => {
    dispatch(requestItem(item));
    return fetch("api.some_url/items/item")
      .then(response => response.json())
      .then(json => {
        if (json.success) {
          dispatch(receivePostsSuccess(reddit, json));
          successCallback();
        } else {
          dispatch(receivePostsFail(reddit, json));
          errorCallback();
        }
      });
    }
  };
}

这是否违反模式?换句话说,通知栏应该根据状态变化而不是回调来打开吗?

模式本身很好。如果这是组件的本地通知,请尽量避免通过Redux连接它。

也就是说,回调是完全没有必要的,因为你已经返回了承诺。等待它完成。

this.props.dispatch(asyncAction(item)).then(onSuccess, onFailure);

但是,如果您有许多组件具有这样的通知栏,那么最好有一个reducer来保存当前通知并对操作做出反应。

这将是双向数据流,它打破了通量的第一规则。

我建议像NotificationStore那样分离命名为smth的存储,并围绕它构建通知基础设施。你可以使用回调,但这在将来会造成很大的问题。

相关内容

最新更新