Скачать или смотреть Map Dispatch to Props

The mapDispatchToProps() function in React-Redux is a utility used to map Redux dispatch actions to props that are passed into your React components. It allows your components to trigger state changes in the Redux store by dispatching actions without directly interacting with store.dispatch().
Here's a breakdown of its purpose and how it works:
Providing Action Creators to Components: mapDispatchToProps enables you to provide specific action creators to your React components as props. These action creators, when called, will dispatch their respective actions to the Redux store.
Abstracting Dispatch Logic: Instead of having your components directly call dispatch({ type: 'SOME_ACTION' }), mapDispatchToProps wraps the dispatching logic within functions that are then passed as props. This makes your components cleaner and more focused on rendering, while the Redux-related logic is handled separately.
Two Forms:
Function Form: You define mapDispatchToProps as a function that receives dispatch as an argument and returns an object. Each key-value pair in this object represents a prop name and a function that dispatches an action.
Object Shorthand Form: This is a more concise way, especially when your action creator arguments directly match the callback prop arguments. You pass an object where the keys are prop names and the values are your action creators. react-redux automatically binds these action creators to dispatch internally.
Integration with connect(): mapDispatchToProps is the second argument passed to the connect() higher-order component from react-redux. This connect() function then injects the defined dispatching functions as props into your wrapped React component.
By using mapDispatchToProps, you achieve a cleaner separation of concerns, making your Redux-connected components more reusable and easier to test.


The mapStateToProps function is a core concept in React Redux, used to connect a React component to the Redux store and extract specific pieces of state data as props for that component.
Here's a breakdown of its purpose and how it works:
Purpose: mapStateToProps allows you to select the necessary data from the entire Redux store state and make it available as props to a connected React component. This ensures that the component only receives the data it needs, promoting better performance and maintainability.
Definition: It is defined as a function that takes two arguments:
state: This represents the entire Redux store state.
ownProps (optional): This contains the props passed directly to the connected component.
Return Value: mapStateToProps must return a plain JavaScript object. Each key-value pair in this object represents a prop that will be passed to your connected React component. The values in these fields are used to determine if the component needs to re-render when the Redux store state changes.
Integration with connect: You pass mapStateToProps as the first argument to the connect function provided by react-redux. The connect function then handles the subscription to the Redux store and calls mapStateToProps whenever the store state changes.
Re-rendering Optimization: By selecting only the relevant parts of the state, mapStateToProps helps optimize re-rendering. If the selected data remains unchanged, even if other parts of the store state are updated, the connected component will not unnecessarily re-render.

store.dispatch() is the only way to trigger a state change in a Redux application. The method sends an "action"—a plain JavaScript object describing an event—to the store, which then forwards it to the application's reducer function.
The process of dispatching an action
A user interacts with the app. For example, they might click a button to add an item to a shopping cart.
An action is created and dispatched. Your application code calls store.dispatch() and passes an action object as an argument. The action typically has a type property (e.g., 'ADD_ITEM') and may include a payload with new data.
The reducer computes the new state. The store automatically sends the current state and the action to the reducer function. The reducer is a "pure" function that returns a new state object based on the action, without modifying the original state directly.
The store updates and notifies subscribers. The Redux store saves the new state and informs all components that are "subscribed" to the store that an update has occurred.
Components re-render. Any UI component subscribed to the store that is affected by the state change will automatically re-render to display the updated data.

In Redux, the store.subscribe() method is used to register a callback function that is executed every time the state in the Redux store changes. It is a low-level API that allows parts of your application to react to changes in the global state, ensuring the user interface (UI) stays synchronized with the data.