React-Redux a simple overview!!!

A brief overview of how react-redux share a great bond.

This article is very concise and just gives a flow of react-redux and some basic explanation of what is what and where they fit in right exactly.

react-redux at a glance

Views:

Views are simple react components that receive props(readonly) when connected with redux (connect) and main component being wrapped around the Provider(react-redux).

Provider wrapping react application with single store.

Actions:

Actions are simple user interactions, events or maybe some change you want to make to the data in your application.

In general all actions return an object with two properties, a type and some data that you want to pass down for a change.

sample action code

Reducers:

Reducers are the core part in the redux, here is where the new state is generated, nah!!! To sound more like the name ‘Reducer’ let me say, here is where the old state is reduced to new state.Remember your old state is not mutated, in fact a new state is created with the required changes and returned as a fresh new instance.

sample reducer code

Store:

Store is one place where all data required by your application is stored.

Just like how it feels to be home…one place for all what you need!!! :D .

So now let us end the introductions and understand the flow, probably by seeing the image and reading the descriptions of each of them you are already 75% through it. I will be very short in the explanation you have many more articles for a in depth references.

The Bond of react-redux, the great data flow:

Now let us try and understand the flow it is very simple,

1. Your app typically starts with some initial state.
2. All the views/react-components receive the required props from the state as react-redux does this when we write this one special function called mapStateToProps.
3. User performs some action, and the action is dispatched to reducer.
4. Reducer takes the old state, type of action and new data to be either added or modified, and return new state.
5. The new states props are passed and the views that need a change are re-rendered.(sit back and relax, react-redux know each other very well!!!).

Well this is my first article hope you enjoyed, any kind of criticism is accepted if I have done a mistake, let me know I will learn and correct myself. Thanks for Reading.