Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
45
rated 0 times [  52] [ 7]  / answers: 1 / hits: 33529  / 9 Years ago, thu, october 15, 2015, 12:00:00

I want to show different notification bars for success/error responses,
I pass two callBacks to an redux async action in my react component like this:



<Button
onClick={e => this.props.actions.asyncAction(item, this.showSuccessBar, this.showErrorBar)}
/>


where asyncAction looks like this:



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


Is this considered against the pattern?
in other words, Should Notification Bars open according to the state change instead of callBacks?


More From » reactjs

 Answers
70

The pattern is fine per se. If this is a notification local to the component, feel free to avoid wiring it through Redux.



That said callbacks are completely unnecessary because you are already returning the promise. Just wait for its completion.



this.props.dispatch(asyncAction(item)).then(onSuccess, onFailure);


However if you have many components with such notification bars, it's better to have a reducer keeping the current notification and reacting to actions.


[#64736] Monday, October 12, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
dusty

Total Points: 739
Total Questions: 97
Total Answers: 85

Location: Angola
Member since Wed, Apr 13, 2022
2 Years ago
;