CODEWITHSUNDEEP
reactjsreduxredux-thunk
Samuel
Samuel

Reputation: 2635

React Redux Thunk with mapDispatchToProps

Looking at examples of how to use mapDispatchToProps most examples follow the following pattern, a function that returns an object with dispatch as an argument:

const mapDispatchToProps = (dispatch) => {
    return({
        someFunc: (arg) => {dispatch(someFunc(arg))}
    })
}

My question is, if all my actions are using thunk, meaning they all have access to dispatch anyway, why would i need to use the above example for mapping functions to props in my containers ?

After experimenting i've figured out another way that seems to work, however im not sure if this is best practice...

Main.jsx

import * as mainActions from '../actions/mainActions'
import * as menuActions from '../actions/menuActions'

const actionsToMap = {...mainActions, ...menuActions}
export default connect(mapStateToProps, actionsToMap)(Main)

Is there anything wrong with this approach?

Upvotes: 0

Views: 3444

Answers (2)

Toni Leigh
Toni Leigh

Reputation: 4971

Separating the concerns is a good idea and in almost all apps it would be a good idea to use Action Creators (which is what you're doing in the second example) as oppose to use plain objects (as in the first).

There are several benefits:

  1. Easier to extend and convert if it isn't buried in an object / function
  2. Easier to test an isolated, functional action. (Have you tried testing the first example?)
  3. Possible to re-use - what happens if some other part of your app needs to dispatch the same action, would you cut and paste this dispatch?
  4. Now consider 1 and 3 together, if you'd dispatched this in several places and you need to extend?

It's not just me saying this, the Redux docs covers it here: https://redux.js.org/recipes/reducingboilerplate#action-creators

That being said, they do also say that plain objects might be enough, but considering how simple action creators actually are it's probably worth making your work extensible in almost all cases.

Upvotes: 0

Rowland
Rowland

Reputation: 1823

Both approaches are correct and you can also use bindActionCreators when you want to pass some action creators down to a component that isn't aware of Redux, and you don't want to pass dispatch or the Redux store to it. Technically, that's the only use case for it.

Pulling it from the documentation, mapDispatchToProps can be a function or object.

I think your first approach is good for documentation as one can easily see the signature of the action creators you're using in your component without having to navigate to the action creator file. Other than that, I'm fine using objects(your second approach) in most cases.

Hope this helps!

Upvotes: 1

Related Questions