REDUX EXPLAINED

Photo by Joshua Aragon on Unsplash

WHAT IS REDUX AND WHY IS REDUX USED

‘Redux is a predictable state container for JavaScript apps’ WRITTEN ON OFFICIAL DOCS

SO THAT BASICALLY MEANS REDUX IS A CONTAINER WHERE A STATE IS KEPT WHICH CAN BE ACCESSED BY ANY COMPONENT AND USED BY THEM.

FOR EXAMPLE IF WE HAVE HEADER FOOTER AND CONTENT AS 3 DIFFERENT COMPONENTS AND ONE OF THE DATA IN THE STATE OF CONTENT IS NEEDED TO B SHOWN ON HEADER THEN HOW TO PASS THE VALUE??

THIS CAN B A BIT MESSY IF WE HAVE MANY COMPONENTS ,ROUTES AND BASICALLY A BIGGER APP

FOR ALL THOSE SITUATIONS WE NEED A UNIVERSAL STATE TO HOLD THOSE DATAS WHICH IS USED BY MANY COMPONENTS

ANOTHER EXAMPLE CAN BE :

AMAN HAS 3 TOY CARS , HIS SIBLING NISHI HAS 2 DOLLS AND THEIR MOTHER HAS 2 TOYS . SO AMAN WOULD BORROW THOSE 2 TOY CARS FROM HIS MOM AND PLAY AND NISHI CAN ALSO BORROW THOSE SAME CARS AND PLAY ALONG WITH PLAYING WITH THEIR OWN RESPECTIVE TOYS WHICH NONE OF THE OTHER TOUCHES!!!(TYPICAL SIBLING STUFF 😂)

VERY SIMPLE!

HOPE THIS EXAMPLES MADEU UNDERSTAND A LITTLE BIT OF USAGE OF REDUX

U WILL UNDERSTAND MORE ONCE U READ THE EXAMPLE BELOW

— BASIC STEPS FOR REDUX —

1. MAKE A ACTIONTYPE

FIRST OF ALL ACTIONTYPES R THE STRINGS WHICH HOLD A CERTAIN VALUE

EXAMPLE:

export const INCREMENT = “INCREMENT”;

2. MAKE A ACTION FOR IT

ACTIONS R ARROW FUNCTIONS WHICH RETURN A TYPE (MANDATORY) . THIS R THE SAME TYPES WE DEFINED EARLIER AS ACTIONTYPES.

NOW THIS ACTIONS CAN RETURN ANY OTHER DATA AS WELL (i.e WE CAN PASS ARGUMENTS TO ACTIONS AS WELL)

EXAMPLE:

export const increment = () => {
return {
type: types.INCREMENT,

```

3. MAKE A REDUCER FOR THIS ACTION (WHICH WILL BE CALLED WHEN THAT ACTION IS DISPATCHED)

THIS R THE ARROW FUNCTIONS WHERE ACTUAL LOGIC OF ANY ACTION TAKES PLACE . WHENEVER A ACTION IS DISPATCHED THAT PARTICULAR REDUCER STARTS WORKING AS WELL

EXAMPLE:

//A BASIC TODO REDUCER

export const todos = [];

//A BASIC COUNTER REDUCER

const initialState = {

```

4. CREATE A STORE AND WRAP THE PARENT COMPONENT IN PROVIDER (WHICH HAS THAT STORE)

TILL NOW WE WERE DOING BASIC PROGRAMMING OF ACTIONS AND REDUCERS

NOW WE R CONNECTING THE REDUCERS AND THEIR STATE TO STORE WHICH IS PARENT FOR ALL OTHER COMPONENTS

JUST DIVE INTO THE CODE AND U WILL UNDERSTAND EVERY PART OF IT

import { createStore, applyMiddleware, compose } from “redux”;

5. MAP STATE TO PROPS AND USE THEM IN THE COMPONENTS

DURING PREVIOUS STEPS A STORE IS CREATED WHICH HAS THE DATA OF STATE DEFINED IN REDUCERS.

NOW TO CONNECT THE COMPONENTS WITH THE STORE/STATE WE NEED CONNECT FUNCTION AND THIS IS WHERE MAP STATE TO PROPS COME IN.

AS THE NAME SUGGESTS THIS FUNCTION JUST MAPS THE STATE TO PROPS AND THEN IT CAN BE USED BAY THAT PARTICULAR COMPONENT AS PROPS

EXAMPLE:

//THIS FUNCTION MAPS THE STATE’S COUNTER FROM COUNTER REDUCER TO BE PASSED AS ‘counter’ PROP TO THE APP COMPONENT

const mapStateToProps = state => {

MAP DISPATCH TO PROPS

Dispatching functions mapped to props which will dispatch certain actions on calling those prop functions

EXAMPLE:

constructor(props) {

Interested in frontend developement & UI design

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store