将callBacks传递给redux异步操作被认为是一种好习惯吗?

nai*_*fen 46 javascript reactjs redux

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

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

其中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();
        }
      });
    }
  };
}
Run Code Online (Sandbox Code Playgroud)

这是否反对这种模式?换句话说,应该根据状态更改而不是callBacks打开通知栏?

Dan*_*mov 92

这种模式本身就很好.如果这是组件本地的通知,请随时通过Redux进行连接.

这说回调是完全没必要的,因为你已经回复了承诺.等待它的完成.

this.props.dispatch(asyncAction(item)).then(onSuccess, onFailure);
Run Code Online (Sandbox Code Playgroud)

但是,如果您有许多具有此类通知栏的组件,则最好让reducer保留当前通知并对操作做出反应.

  • React-redux的`dispatch`道具似乎没有回复承诺!奇怪的. (7认同)
  • 为什么每当我尝试使用 `.then()` 时,我都会收到 `cannot read 'then' of undefined`:当 `dispatch` 工作并分派操作时,它如何会是未定义的? (2认同)
  • @DanAbramov 在文档 https://redux.js.org/docs/basics/Actions.html 中说“操作是将数据从您的应用程序发送到您的商店的信息的有效载荷”。我同意。对我来说,动作描述了一个事件或改变或突变的意图,它们通知了架构的许多地方。将一个副作用回调放在一个动作中来跳转架构对我来说不是一个好的模式,回调不是描述改变的意图。 (2认同)

Bri*_*and 5

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

  • 丹·阿布拉莫夫 (Dan Abramov) 说没问题,那就意味着没问题 :D (24认同)