Explaining Connect, mapSateToProps, mapDispatchToProps

The connect() function connects a React Component to a Redux store. It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store. it doesn't change the component calls passed to it, instead, it returns a new, connected component class that wraps the component you pass in.

mapStateToProps & mapDispatchToProps are parameters of connect(). mapStateToProps if called the wrapper component will subscribe to the Redux store updates. The results of mapStateToProps must be a plain object, which will merge into the wrapped component’s props. If you don't want to subscribe to the store updates, pass null in place of mapStateToProps. mapDispatchToProps your component will receive dispatch by default when you do not use a second parameter to connect(). Maybe a function or an object or not supplied. If used as a function it will call a max of two parameters dispatch: function (give dispatch of your store) and ownProps?: object.

The react-redux package exposes a very simple interface. You only need to concern yourself with the following:

1. <Provider> wraps the React application and makes the Redux state available to all container components in the application’s hierarchy
2. connect([mapStateToProps], [mapDispatchToProps] creates a higher-order component for making container components out of base React components.

The React-Redux connect() API is used for creating container elements that are connected to the Redux store. The Redux store is derived from the topmost ancestor of the component using the React context mechanism. You have no need to connect() if you are only creating a presentational component.

Whether you want to get data from the Redux store, dispatch actions on the Redux store, or do both in your React component, you can make the component a container component by wrapping it in a higher-order component returned by connect(). You could create a container component yourself and manually subscribe the component to the Redux store using store.subscribe(). However, using connect() comes with some performance improvements and optimizations that you may not be able to implement in your application.