Redux-saga, optimal way of handling this close modal flow

user_5279965 0
Viewed 1364

Imagine there is a modal/dialog open. In that modal there is a save button that dispatches an updateUser action that gets picked up by redux-saga. redux-saga then does the network call. If this network call is successful the modal should automatically close. What would be the optimal way of doing this with redux-saga?

In redux thunk, we would dispatch the action (promise) and we can then chain a 'then' that handles the modal close when the network call was successful, right there in the component. So me and a colleague were wondering, what would be the optimal way to do this with redux-saga?

redux-saga reactjs
1 Answers

My take on it:

  • Let's assume the owner of the modal keeps the open/closed state as local state
  • Let's also assume that in either case (success or failure) this involves some global state (redux) changes

Now the flow:

  • Fire action on button click, your saga does it's job
  • "Subscribe" to the changes made in the global state by your saga (in connects mapStateToProps attach this piece of state to your props too) in the modal's owner component
  • In componentWillReceiveProps of the modals owner component watch for these changes in case the modal is open, and update the local open/closed state accordingly
user_11262730
Related