52

我想为成功/错误响应显示不同的通知栏,我将两个回调传递给我的反应组件中的 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();
        }
      });
    }
  };
}

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

4

3 回答 3

107

图案本身很好。如果这是组件本地的通知,请随意避免通过 Redux 连接它。

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

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

但是,如果您有许多带有此类通知栏的组件,则最好使用 reducer 来保持当前通知并对操作做出反应。

于 2015-10-16T10:24:10.550 回答
4

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

于 2015-10-15T02:21:22.713 回答
1

我建议分离名为 smth like 的商店NotificationStore并围绕它构建通知基础设施。您可以使用回调,但它是未来大问题的方式。

于 2015-10-15T07:48:07.123 回答