I’m new to redux and trying to undersatnd the entire flow. I understood how we pass dispatch & actions as props to component (counter in this tutorial) . Now, suppose, if I click - button, onClick calls and it has a prop this.props.decreaseCount so then what happens , what happens how do the state gets updated and displays on UI
For reference, I’m pretty sure you’re looking at:
decreaseCount here is known as a bound action creator meaning its a function that automatically calls dispatch with an action, usually an action created by an action creator. In this particular example, there isn’t an action creator per se - that being a function that creates and returns an action object. The action objects being used in the example are pre-defined, being static values, and they’re simply passed directly into dispatch.
var decreaseAction = { type: "decrease" };
// ...
decreaseCount: function() {
return dispatch(decreaseAction);
}
The dispatch is key to what happens next. It has a connection to the store defined in the nearest <Provider> component found walking up the parent hierarchy from the current component. As it’s called, it invokes the reducer that store was created with, passing into that reducer the current state of the store and the action used with that call to dispatch.
The reducer then takes an action, and updates the state. That’s all it does.
When the reducer has completed and there’s a new state in the store, redux will propagate those changes out to the subscribers of that store. This is where mapStateToProps functions get called (and maybe mapDispatchToProps also gets recalled) to update the props that gets fed into your components that have redux containers. If any of those props have changed since the last render, those components get rendered again, updating their UI, waiting for the next button click or whatever to happen again that restarts the process.
