javascript - react Redux : dispatch returning data to component

Question

我有一个带有表单的组件，可以添加一个项目。提交表单后，我将使用 redux 调度异步操作，如下所示:

_onSubmit(event) {
    const { dispatch } = this.props;
    const { data } = this.state;
    event.preventDefault();

    dispatch(addItem(data));
  }

现在，我的后端将创建一个带有 ID 的任务，我可以跟踪进度。通常这个给定的任务需要一段时间才能完成，所以我想显示通知栏。

为了跟踪该任务，我需要检索正在进行的给定任务的任务 ID。所以我考虑添加一个回调函数，以便我可以从调度程序获取此信息，如下所示:

_onSubmit(event) {
        const { dispatch } = this.props;
        const { data } = this.state;
        event.preventDefault();

        dispatch(addItem(data, (id) => console.log(id)));
      }

但这感觉有点“hacky”，因为正在进行双向数据通信。

问题:实现此目的的 redux 方式是什么？

Answer 1

对于这个问题，可以有多种方法来达到相同的结果。

我会说使用Redux Thunk (中间件)，这将使您能够从操作创建者中触发多个操作。

那么你应该这样写:

_onSubmit(event) {
 const { dispatch } = this.props;
 const { data } = this.state;
 event.preventDefault();

 dispatch(addItemActionCreator(data));
}

在你的 Action 创建者中，使用一个 promise (因为 thunk 也允许你这样做):

export const addItemActionCreator = (data) => (dispatch) => {
 Promise.get('data').then((data) => {
  dispatch({ type: STORE_DATA_ID, id: data.id })
 })
}

这将调度一个操作，该操作将存储您所在州的 ID。

在您的组件中，使用 connect 订阅 id，您的组件将始终具有最新的 id 值。

希望这有帮助。