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

标签 javascript reactjs 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 连接它。

也就是说,回调是完全没有必要的,因为您已经返回了 promise。只需等待它完成即可。

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

但是,如果您有许多带有此类通知栏的组件,最好让一个 reducer 保留当前通知并对操作使用react。

关于javascript - 将回调传递给 redux 异步操作是否被认为是好的做法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33138045/

相关文章:

javascript - JavaScript 中存在方法 : Checking for truthy sufficient?

javascript - JS onclick 触发错误的对象

javascript - 根据对象属性更新对象数组中的项目

javascript - 如何将模型对象数组转换为以模型 ID 作为键的对象?

reactjs - Redux Saga - 更新本地状态的回调

javascript - Jquery 在离开函数之前等待动画完成

javascript - 如何使用 JavaScript 从 HTML 表格的特定单元格中获取值

reactjs - Typescript 与复杂的 redux 操作和化简器集成

javascript - 如何将 HTML 组件添加到 React.js

reactjs - 在 dom-testing-library 或 react-testing-library 中测试输入值的最佳方法