CODEWITHSUNDEEP
reactjsreact-redux
Benjamin Li
Benjamin Li

Reputation: 1697

In Redux, what is the relationship between store.dispatch(), connect() and bindActionCreators()

what is the difference between dispatch(), connect() and bindActionCreators()?

and in which circumstances should I use each of them?

thanks

Upvotes: 1

Views: 183

Answers (1)

Lyubomir
Lyubomir

Reputation: 20037

  • dispatch - dispatches an action to trigger a change in redux's store. The logic to perform this change is in the reducer.

  • connect - React's state of a particular component has nothing to do with redux's store until you apply the higher order component connect() to this particular component. In order to make redux store and react's state work together, you need connect. After a component has been connected to redux's store, it can listen for changes in the store. If an action has been dispatched, redux store changes and because your component is connected to store and listens to those changes, it needs to rerender. However, there is a small gotcha - you also need to specify on which store changes your component would rerender itself (mapStateToProps) and what state changes your component is allowed to trigger (mapDispatchToProps)

  • bindActionCreators - wraps action creators (a function that creates an action) into dispatch() call so that you can use it like this: fancyActionCreator() instead of having to wrap it in dispatch(fancyActionCreator()).

The only use case for bindActionCreators is 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.

Upvotes: 2

Related Questions