In React / Redux, is it just fine to make a generic dispatch as props to dispatch any action at all?

Question

In one of Dan Abramov's answers, there is code

// action creator
function loadData(dispatch, userId) { // needs to dispatch, so it is first argument
  return fetch(`http://data.com/${userId}`)
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
    );
}

// component
componentWillMount() {
  loadData(this.props.dispatch, this.props.userId); // don't forget to pass dispatch
}

It seems the mapDispatchToProps just maps a generic dispatch as props (as this.props.dispatch), so this component can dispatch any action at all?

First, is it a good form, or is it just an example but we should make it specific dispatch, such as this.props.dataReceived?

Second, so it looks like for the above code, the mapDispatchToProps would be written as:

const mapDispatchToProps = dispatchOfReduxStore => {
  return {
    dispatch: dispatchOfReduxStore
  }
}

or even just:

const mapDispatchToProps = dispatch => {
  return {
    dispatch
  }
}

and simplified to:

const mapDispatchToProps = dispatch => ({ dispatch })

and this.props.dispatch becomes a versatile dispatch?

I also found that when we simply omit the mapDispatchToProps in connect(), then this.props.dispatch is automatically available.

He is not talking about mapping `dispatch` he's talking about mapping action creators — sylvanaar, Feb 27 '20 at 16:15
@sylvanaar I am saying why is there a `props.dispatch`? never seen that before — Jeremy L, Feb 27 '20 at 16:17
It is the default behavior of `connect` to inject `dispatch` if you don't supply `mapDispatchToProps`. If you do supply it - you have to inject it yourself - as you have discovered. — sylvanaar, Feb 27 '20 at 16:27
I see... "Your component will receive dispatch by default, i.e., when you do not supply a second parameter to connect()" https://react-redux.js.org/api/connect#mapdispatchtoprops-object-dispatch-ownprops-object https://react-redux.js.org/using-react-redux/connect-mapdispatch#default-dispatch-as-a-prop — Jeremy L, Feb 27 '20 at 16:45

Brian Thompson · Answer 1 · 2020-02-27T14:27:33.647

I think the main reason for binding dispatch to your actions with mapDispatchToProps is to hide redux from your connected component.

Without binding dispatch, your component must know what your actions are and remember that they do nothing without calling them as a parameter to dispatch.

With binding, your component just knows that it has these functions in props that it can simply call when needed.

The other benefit would be arguably cleaner code, since you can just call this.props.myAction() instead of this.props.dispatch(myAction()).

I don't think its a hard right or wrong. I think some of it is preference. I prefer to write my components to where they only know about the props given to them. But you may prefer to make it explicit that your component is using redux to dispatch actions.

In React / Redux, is it just fine to make a generic dispatch as props to dispatch any action at all?

1 Answers1