React-Redux : A basic intro for Back-end developers

This Blog is an attempt to simply put forward the concept of React-Redux and its relevance to the context of React.

First of all if you have heard both Redux and React-Redux and it sounds confusing then understand that they both are related but two different Things.

Redux, according to Redux.js.org(Official Redux website) is a Predictable State Container for Js Apps (Don’t worry if the last few words make no sense, that is what this blog is all about), whereas React-Redux is a package that is used in React projects to use Redux in them.

Oversimplified Definition for newbies -

Simply put Redux can be seen as some sort of global variable, whose value can be accessed from anywhere in the project.

Yes, This is how simple and easy this is ! At least at the high level, it is this easy. But Redux has a TON of new jargon that is needed to be learnt and this is probably the most challenging part to be honest.

There are three main parts to React-Redux

Part 1— Store

This is basically a fancy word for a variable. It is where your data is stored

create Store function call

Part 2— Reducers

Reducers are pure functions that take in the previous state of your store and an action you would like to use to transform the store. These are commonly a list of case statements.

A Typical Reducer Example

Part 3— Actions

Actions can be understood as a simple function which when called from the component triggers the required reducer which in turn then performs the task it is meant to do.

Accessing Actions in components

That’s it !!! This is the most basic introduction to React-Redux, there is definitely more to it than just this but I hope it helps you to get started on the journey of understanding React-Redux.

THANK YOU :-D