# Redux flow doubt

**URL:** <https://forum.kirupa.com/t/redux-flow-doubt/639895>\
**Category:** Uncategorized\
**Created:** [May 30, 2019, 10:35pm UTC](https://forum.kirupa.com/t/redux-flow-doubt/639895 "2019-05-30T22:35:10Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Harika\_Sunkara](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/harika_sunkara/32/9665_2.png) [@Harika\_Sunkara](https://forum.kirupa.com/u/Harika_Sunkara)\
**Post date:** [May 30, 2019, 10:35pm UTC](https://forum.kirupa.com/t/redux-flow-doubt/639895/1 "2019-05-30T22:35:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [May 31, 2019, 2:05am UTC](https://forum.kirupa.com/t/redux-flow-doubt/639895/2 "2019-05-31T02:05:17Z")

</div>

For reference, I’m pretty sure you’re looking at:

> **[Using Redux with React](https://www.kirupa.com/react/using_redux_with_react.htm)**
>
> Learn how to use Redux for efficiently handling the data in your React app.

`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`.

```auto
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.

[![](https://www.kirupa.com/react/images/redux_react_overview_200.png) ](https://www.kirupa.com/react/images/redux_react_overview_200.png)