How does connect work without mapDispatchToProps

by

connect()(AddTodo) will pass dispatch as a prop to AddTodo component, which is still useful even without state or predefined actions. Thats the reason mapDispatchToProps is not needed in your code

Now in your component let AddTodo = ({ dispatch }) => { you are destructuring your props to only access dispatch.

If you make use of mapDispatchToProps you will make your addTodo action available as a prop to your component and then call it like this.props.addTodo. So the above approach is an alternative. It depends on you to choose what you feel comfortable with

connect just passes store / dispatch through React context so you don’t have to pass the store through many components. You don’t have to use connect though. Any module / HOC pattern could work, connect just happens to be a convenient thing to use.

Using dispatch in the component or using mapDispatchToProps are one and the same thing.

However using mapDispatchToProps gives you much more flexibility in structuring your code and having all the action creators at one place.

As per the docs:

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with
every action creator wrapped into a dispatch call so they may be
invoked directly, will be merged into the component’s props.

If a function is passed, it will be given dispatch as the first parameter. It’s up to you to return an object that somehow uses
dispatch to bind action creators in your own way. (Tip: you may use
the bindActionCreators() helper from Redux.)

If your mapDispatchToProps function is declared as taking two
parameters, it will be called with dispatch as the first parameter and
the props passed to the connected component as the second parameter,
and will be re-invoked whenever the connected component receives new
props. (The second parameter is normally referred to as ownProps by
convention.)

If you do not supply your own mapDispatchToProps function or object
full of action creators, the default mapDispatchToProps
implementation just injects dispatch into your component’s props.

More Related Contents:

  1. What is mapDispatchToProps?
  2. What is the best way to access redux store outside a react component?
  3. Use Connect or pass data as props to children
  4. Use history.push in action creator with react-router-v4?
  5. how to set initial state in redux
  6. My Redux state has changed, why doesn’t React trigger a re-render?
  7. How do I see state when logging to the console instead of Proxy object inside reducer action?
  8. axios post request to send form data
  9. React Context vs React Redux, when should I use each one? [closed]
  10. How can I persist redux state tree on refresh?
  11. Attach Authorization header for all axios requests
  12. What is the best way to redirect a page using React Router? [closed]
  13. Understanding React-Redux and mapStateToProps()
  14. React – Display loading screen while DOM is rendering?
  15. React-Redux: Actions must be plain objects. Use custom middleware for async actions
  16. How to reset TabNavigator when user logs out (from other screen)
  17. Next.js – Error: only absolute urls are supported
  18. Stop useEffect from running on mount
  19. How do I access store state in React Redux?
  20. ReactJS lifecycle method inside a function Component
  21. Element type is invalid: expected a string (for built-in components) or a class/function
  22. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  23. Getting error Cannot read property ‘setState’ of undefined
  24. React: Parent component re-renders all children, even those that haven’t changed on state change
  25. How to give Image src dynamically in react js?
  26. Redux Presentational Components Vs Container Component
  27. How can I dispatch function in redux?
  28. Component won’t update when a redux state change occurs
  29. how to async/await redux-thunk actions?
  30. Cache busting with CRA React

Leave a Comment