我有一个带有表单的组件,可以添加一个项目。提交表单后,我将使用 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 方式是什么?
最佳答案
对于这个问题,可以有多种方法来达到相同的结果。
我会说使用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
值。
希望这有帮助。
关于javascript - react Redux : dispatch returning data to component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43290369/