Introduction to REDUX

REDUX IS A STATE MANAGEMENT LIBRARY FOR JS APPS.

REDUX IS BUILT FOR LARGER, MORE COMPLEX APPLICATIONS ( FOR REAL LIFE PROJECTS IN COMPANIES NOT FOR STUDENT PROJECTS)

SOME USE CASES, 

=> WHEN MULTIPLE COMPONENTS SHARE INFORMATION THROUGH PROPS IN A HIERARCHY,WE USE REDUX TO REDUCE THE COMPLEXITY OF SENDING MULTIPLE PROPS

=> WHEN MULTIPLE COMPONENTS SHARE A SINGLE STATE.

REDUX IS MORE LIKE A CENTRAL STORE, THAT MANAGES ALL THE STATES.

IMAGINE A FEW STORES IN A TOWN, MANAGING ALL OF THEM IS QUITE COMPLEX.

NOW, IF A MALL IS CREATED THAT CONSISTS OF ALL THE STORES THEN IT IS POSSIBLE TO MANAGE THEM.

HERE, REDUX ACTS LIKE A MALL ( CENTRAL STORE ) THROUGH WHICH ALL THE STATES CAN BE MANAGED.

REDUX TOOL KIT IS THE OFFICIAL RECOMMENDATION OF WRITING REDUX CODE.



HERE STORE IS AN OBJECT THAT CONSISTS OF ALL THE STATE VARIABLES.

ANY COMPONENT CAN ACCESS THIS OBJECT.

JUST LIKE IN REACT WE HAVE setState() TO MUTUATE , IN REDUX WE HAVE REDUCERS.

REDUCERS ARE THE FUNCTIONS USED TO MUTUATE.

WE CAN CREATE MULTIPLE REDUCERS.

TWO PARAMETERS CAN BE SENT TO THE REDUCER FUNCTION.

reducer [ state, action ]

STATE - THE STATE THAT HAS TO BE MODIFIED.

ACTION - ON BASIS OF WHAT ACTION, THE STATE IS MODIFIED.

REDUX IS MOSTLY USED TO EXECUTE MULTIPLE TASKS , WHEN A SINGLE CHANGE IS APPLIED.

FOR EXAMPLE, IN AMAZON IF A NEW ITEM IS ADDED TO THE CART, THIS ITEM'S PRICE IS INCLUDED IN THE TOTAL PRICE, NO.OF ORDERED ITEMS INCREASES.

HERE, THE ACTION IS ADDITION OF A NEW ITEM TO THE CART, THE STATES ARE PRICE AND THE TOTAL ITEMS

IN CASES LIKE THIS , WE USE REDUX . WHERE A SINGLE CHANGE IN THE CENTRAL STATE CAUSES MULTIPLE ACTIONS.







Comments

Post a Comment

Popular posts from this blog

TODO COMPONENT (PROVIDER AND USE SLECTOR)

Image
 A COMPONENT FOLDER IS CREATED  IN THE src FOLDER IN WHICH A todo.jsx IS CREATED. THE TODO COMPONENT IN THE FILE NEEDS ACCESS TO THE STORE INORDER TO PRINT THE LIST OF TASKS IN TODOS. THIS ACCESS IS PROVIDED BY A COMPONENT CALLED PROVIDER . PROVIDER THE <Provider> COMPONENT MAKES THE REDUX STORE AVAILABLE TO ANY NESTED COMPONENTS THAT NEED TO ACCESS THE REDUX STORE. IT IS IMPORTED IN APP.JS import "./App.css" ; import Todo from "./components/Todo" ; import { Provider } from "react-redux" ; import { store } from "./app/store" ; function App () {   return (     <>       < Provider store = { store } >         < Todo />       </ Provider >     </>   ); } export default App ; WHATEVER THE COMPONENT DECLARED INSIDE <Provider> GETS ACCESS TO THE STORE. STORE IS ALSO IMPORTED IN APP.JS, STORE IS PASSED AS A PROP . TO ACCESS STORE IN TODO.JS WE USE...
Read more

MARK AS DONE

Image
 INITIALLY  IS DONE IS SET AS FALSE, WE CREATE A BUTTON SUCH THAT IT IS SET TO TRUE.   < button               onClick = { () => {                 Mark ( todo . id );               } }             >               Mark as Read             </ button >   let Mark = ( id ) => {     console . log ( id );     dispatch ( markAsDone ( id ));   }; WE ADD A LINE THROUGH WHEN IT IS SET TO TRUE.   < li key = { todo . id } >               < span style = { todo . isDone ? { textDecoration : "line-through" } : {} } >               { todo . task } &nbsp;             </ span >
Read more

Deciding ACTIONS

 HERE IN TODO ACTIONS INCLUDE , ADD A TODO, MARK AS DONE, DELETE A TODO. ACTION IS AN OBJECT, IN WHICH "TYPE" IS COMPULSORY. TYPE REFERS TO THE ACTION'S TYPE. IT CAN BE ANY NUMBER,CHARACTER BUT GENERALLY WE DECLARE TYPE AS A STRING. ALONG WITH THE TYPE , ADDITIONAL INFORMATION IS ALSO SENT CALLED AS PAYLOAD. IF WE WANT TO PASS MULTIPLE INFORMATION, PAYLOAD CAN BE DEFINED AS AN OBJECT. BUT HERE,  WE DEFINE THEM AS  { type: "ADD_TODO", payload:"WRITE CODE" } {  type:"DELETE", payload:"id" } NOTE: HERE, ACTIONS ARE NOT WRITTEN AS CODE, THEY ARE IMAGINED AS OBJECTS AND ARE ASSUMED TO LOOK LIKE THIS( WRITTEN ABOVE ).
Read more