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)));
      }

但这感觉有点＆＃34; hacky＆＃34;因为正在进行双向数据通信。

问题：实现这一目标的还原方式是什么？

Answer 1

可以有多种方法来解决此问题。

我会说使用Redux Thunk（中间件），这将使您能够从您的动作创建者处激活多个动作。

然后你应该写这样的东西：

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

 dispatch(addItemActionCreator(data));
}

在你的动作创建者中，使用一个承诺（因为thunk也允许你这样做）：

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

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

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

希望这有帮助。

Answer 2

有几种不同的方法可以实现这一目标。我使用redux-saga与eventChannels完成了非常相似的事情。

你也可以使用redux-cycles或redux-observable来达到同样的目的：创建一个可以订阅你的API信号的观察者，并在它们到来时调度动作。

我不是redux-thunk的粉丝。也许有一种方法可以使用redux-thunk实现这一点，但我很确定它不会轻松/优雅。

React Redux：将返回数据分派给组件

2 个答案: