2

Reading many articles and blogposts on this I understand(simplified) 

mapDispatchToProps()(
    clickHandler: ()=>dispatch(Action)
);

<Component onClick={this.props.clickHandler} />

Does the same as 

<Component onClick={store.dispatch(action)} />

Which looks simpler than having all the hassle of using mapDispatchtoProps

I am new to redux and react in general and can't wrap my head around this. Is there an actual necessity to use it or is it just good coding practice?

skyboyer
  • 22,209
  • 7
  • 57
  • 64
Shahab Uddin
  • 101
  • 1
  • 11
  • 3
    Possible duplicate of [store.getState or mapStateToProps in Component](https://stackoverflow.com/questions/52074622/store-getstate-or-mapstatetoprops-in-component) – Bhojendra Rauniyar Nov 01 '18 at 09:02

3 Answers3

1

There isn't an absolute necessity to use mapDisplayToProps but it will get pretty handy if your application grows.

In your second example you access the store object directly. This is not considered a good coding style because you couple your component to a global object which makes it harder to test the component in isolation or to use it in another context.

Think about each component as an isolated piece of software with the props passed to the component being the only interface to the rest of your application. This won't matter much for small example-like applications but pays off in real-world conditions.

Johannes Reuter
  • 3,501
  • 19
  • 20
  • Thank you. This makes sense. Maybe this only looks overly engineered from where I stand right now. One more thing. Since mapDispatchtoProps only maps a function to a prop, the mapped function is 'defined' inside mapDispatchToProps, right? I'm talking not just a dispatch call but say a lengthy function that may get some data from an API and dispatch the results. – Shahab Uddin Nov 01 '18 at 09:16
  • You are correct, the mapped function is defined in the mapDispatchToProps function. It is possible to directly embed complicated side-effects like calling an API in there - another common way is to move this stuff into a redux middleware or use some framework like redux-saga. Take a look at https://goshakkk.name/redux-side-effect-approaches/ for the different options. However for starters triggering side effects directly inside the mapDispatchToProps should be fine – Johannes Reuter Nov 01 '18 at 09:29
1

The main idea of connect with mapDispatchToProps and mapStateToProps is to keep you UI components simple and easily reusable. Imagine, if you have 3 applications which have completely different architecture(redux, flux, pure React ContextAPI), but should reuse same UI components. If you incapsulate business logic directly to your components (2. example), then it might be very hard or even impossible to reuse it, because it is attached to some store (in the place where you use your <Component ... />).

Just as a side note and good example, how mapDispatchToProps can make your application clean is clear separation between business logic and UI component.

Example:

You have a Button component, which is used all over the application. Then you get a requirement that you need to have a logout button in different places of your application. One way would be to create a new regular React component, which will use the Button component inside and also have some logic.

connect with mapDispatchToProps comes to help you and allow to easily create a new LogoutButton component with attached logic (which also allows you to update the redux state), then whenever you need to have a logout button you simply use LogoutButton and there will be no need in any extra logic because it's all defined inside mapDispatchToProps and is already attached to the Button component.

Oleksandr Fedotov
  • 384
  • 2
  • 8
0

mapDispatchToProps() is a utility which will help your component to fire an action event (dispatching action which may cause a change of application state)

Asif vora
  • 3,163
  • 3
  • 15
  • 31