React Redux:将数据返回给组件
问题描述:
我有一个组件,其中会添加一个项目。当提交表单我使用的终极版,这样的事情分派异步操作:React 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)));
}
但因为有一个双向数据通信回事这种感觉有种“哈克”。
问题:实现这个的最简单方法是什么?
答
可以有多种方法来实现这个问题相同的结果。
我会说使用Redux Thunk(中间件),它将使您能够从动作创建者发起多个动作。
那么你应该写这样的事情:
_onSubmit(event) {
const { dispatch } = this.props;
const { data } = this.state;
event.preventDefault();
dispatch(addItemActionCreator(data));
}
在你行动的创建者,使用一个承诺(如形实转换可以让你做到这一点为好):
export const addItemActionCreator = (data) => (dispatch) => {
Promise.get('data').then((data) => {
dispatch({ type: STORE_DATA_ID, id: data.id })
})
}
这将派遣一个将在你的状态下存储id的动作。
在您的组件中,使用connect
订阅id
,并且您的组件始终具有最新的id
值。
希望这会有所帮助。
答
有几种不同的方法来实现这一点。我使用redux-saga和eventChannels做了非常类似的事情。
您也可以使用redux-cycles或redux-observable来达到同样的目的:创建一个订阅了API信号的可观察对象,并在它发出时调度它。
我不是一个重量级的粉丝。也许可能有一种方法可以使用redux-thunk来完成此操作,但我确信它不会很简单/优雅。
因此,您的端点在收到带有任务ID的帖子请求后立即发送响应? – KornholioBeavis
是的!或几乎立即 –
好了,所以这个过程是这样的:1。 fething_task_Id 2. taskId_fetched_successfully //加载,任务在后台运行的地方3. // task_finished数据//渲染数据 – KornholioBeavis