1

I'm using redux-logic to handle the business logic of my react-redux app.

I have component A with some fields. outside of this component, I have other components, that a user can click on them, and call actions.

while do some things in component A, the user can click on those other components.

What is the best way to 'catch' those calls, but first show some popup that says 'hey, are you sure?' and if the user click 'ok' - fire those calls?

so far i just managed to do something like this:

  • user call an action from component B for example (while still have unfinished business in component A)
  • the the logic that listen to this call, check if we are in dirty mode. If it is, we reject the call.

two things that not feels right for me :

  1. I need to implement this checking in EVERY call
  2. it does not tells me to show the pop up.
naro
  • 31
  • 6

2 Answers2

1

If you were using redux-thunk, then something like this would be as easy as:

function goingAwayAction(){
  return (dispatch, getState) => {
    const state = getState();
    if (Selectors.formIsDirty(state)) {
      confirm("Are you sure?", () => { dispatch(GoAway()) })
    } else {
      dispatch(GoAway())
    }
  }
}

I don't know redux-logic in particular, but your general solution is checking for form dirtiness as part of your async action. There are good libraries for confirmations which let you just specify a callback which happens when they say yes, that'll simplify some logic for you. I've used react-confirm-alert before and had success with it!

ohsully
  • 372
  • 3
  • 10
0

Sounds like you need to use a middleware. Redux-saga should be the answer.

Checkout: https://redux-saga.js.org/docs/basics/DispatchingActions.html

sylar12
  • 107
  • 1
  • 8