Dispatching in Redux based on state

Question

Here's a function I have right now. A handler that can dispatch three different actions.

I would like it so that I can access state here, that way I can only fire the binChangedAction if state.bin !=== bin is this possible or should it be done within the reducer?

export function handleChangeDispatcher (dispatch) {
  return (inputId) => (event) => {
    let data = cleanHandleChangeEvent(inputId, event)
    dispatch(formChangeAction(data))
    if (data.cardNumber) dispatch(creditCardChangeAction(data.cardNumber))
    if (data.cardNumber && data.cardNumber >= 6) dispatch(binChangedAction(getBin(data.cardNumber)))
  }
}

score 4 · Accepted Answer · answered Apr 06 '16 at 17:25

4

Use redux-thunk. It solves this use case exactly. From the readme:

function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState();

    if (counter % 2 === 0) {
      return;
    }

    dispatch(increment());
  };
}

answered Apr 06 '16 at 17:25

markerikson

63,178
10
141
157

I really don't understand how this `incredmentIfOdd` function is used in the context of a `mapDispatchToProps`? http://stackoverflow.com/questions/36461139/accessing-getstate-from-within-action-creator-using-redux-thunk – ThomasReggi Apr 06 '16 at 20:13
`incrementIfOdd` is an example asynchronous action creator function. You could pass it to Redux's `bindActionCreators` utility to auto-dispatch when you call it, or manually bind and dispatch it yourself. The approach you're trying in that question is not correct. – markerikson Apr 06 '16 at 21:19

Dispatching in Redux based on state

1 Answers1