将回调传递给 redux 异步操作是否被认为是好的做法?
is it considered good practice to pass callBacks to redux async action?
我想为 success/error 回复显示不同的通知栏,
我在我的反应组件中将两个回调传递给 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();
}
});
}
};
}
这是否被认为是违反模式的?
换句话说,通知栏应该根据状态变化而不是回调打开吗?
这将是双向数据流,打破了通量的第一条规则。
我建议像 NotificationStore
这样将名为 smth 的商店分开,并围绕它构建通知基础设施。您可以使用回调,但这是解决未来大问题的方法。
图案本身很好。如果这是组件本地的通知,请尽量避免通过 Redux 连接它。
也就是说回调是完全没有必要的因为你已经返回了承诺。 等待它完成。
this.props.dispatch(asyncAction(item)).then(onSuccess, onFailure);
但是,如果您有很多带有此类通知栏的组件,最好让一个 reducer 保持当前通知并对操作做出反应。
我想为 success/error 回复显示不同的通知栏, 我在我的反应组件中将两个回调传递给 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();
}
});
}
};
}
这是否被认为是违反模式的? 换句话说,通知栏应该根据状态变化而不是回调打开吗?
这将是双向数据流,打破了通量的第一条规则。
我建议像 NotificationStore
这样将名为 smth 的商店分开,并围绕它构建通知基础设施。您可以使用回调,但这是解决未来大问题的方法。
图案本身很好。如果这是组件本地的通知,请尽量避免通过 Redux 连接它。
也就是说回调是完全没有必要的因为你已经返回了承诺。 等待它完成。
this.props.dispatch(asyncAction(item)).then(onSuccess, onFailure);
但是,如果您有很多带有此类通知栏的组件,最好让一个 reducer 保持当前通知并对操作做出反应。