Angular — Redux Using NgRx The Complete Guide (Part-1)
Redux Introduction
Lets Start With Whats Redux :-
Redux Rest On these 3 Principles :-
- Single Source Of Truth :- We Have One Place Where all our data lives (State)
- State is read only
- Changes are made with pure function only . The Old State Is never Changed .A new Instance of that state is made .
Pure Function :- These are those function which always give same output when same input is given .
Actions:-
These are the things which manipulate states .It consist of two things 1.Intent of the action . 2. Payload (Data that should be applied to current state).
Syntax :-
let action = {
//Intent
type:"Example",
// data that we have to apply to state payload : [{a:1,b:2}]}
Reducer (Pure Function):-
Reducer are the function which makes the new state .
Flow :-
Action -> Reducers -> State
Action calls the Reducer . Reducers interacts with the state and gives the new object of the same state without mutating the actual one .
syntax :-
function reducer (state = {} , action){switch(action.type){case "Example" :
return object.assign({},action.payload)default :
return state ;
}}Combining Above Theory let initialState = {} ; let action = {type :"Default",payload:[{"A":1}]}let state = reducer(inititalState,action)Simple Example of above Theory .
Basic Patterns In Redux
1.Immutability Pattern (State)
The whole point of state is to to take an existing state apply an action to it and produce new output .old state + action = new state example : - let sum = 0 ; sum3 = sum + 3 sum 6 = sum3 + 3 // We dont mutate anything we produce new state always
Some Example of changing things the redux way : —
Removing element from array :-
let list = [1,2,3]let newList = list.filter(data=> return data !== 1)// Old Way
list.indexof(1)
list.splice(index,1)
Objects :-
// Old Way
let test = {a:1}
test.1 = 2Redux Way
let newList = object.assign({},test,{a:2})
2. Reducers Implementation
//Array
let actionVader = {type:'Add_Item',payload:{name:"Darth Vader"}}
let actionTom = {type:'Add_Item',payload:{name:"Tom"}}function listreducer (state = [], action ) {switch (action.type){case "Add_Item":
return [...state,action.payload]default :return state
}}let state = reducer([],actionVader)console.log(state)
// [{name:"Darth Vader"}]let state = reducer([],actionTom)console.log(state)// [{name:"Darth Vader"},{name:"Tom"}]// Object let actionVader = {type:'Select_Item',payload:{id:1,name:"Darth Vader"}}
let actionTom = {type:'Select_Item',payload:{id:2,name:"Tom"}}function objectreducer (state = {}, action ) {switch (action.type){case "Select_Item":
return Object.assign({},action.payload)default :return state
}}let state = reducer({},actionVader)console.log(state)
// {name:"Darth Vader"}let state = reducer([],actionTom)console.log(state)// {name:"Tom"}
Store :- Where data Lives (Main Program)
Creating A Store Where All Our Data Lives
function Store (state = {jedis:[],selectedjedis = null}){return {jedis : listReducer(state.jedis,action),
selected : objectreducer(state.selected,action) // reducer from above
}}let actionVader = {type:'Add_Item',payload:{name:"Darth Vader"}}
let actionTom = {type:'Add_Item',payload:{name:"Tom"}}
let select = {type:"select_item",payload:{name:"Tom"}}let inititalState = {jedis:[],selectedJedis:{}}let state = store(initialstate,actionVader);
console.log(state)
Output:-// jedis:[{name:"DarthVader"}] , selected :{} state = store (state,actionTom)
output : - // jedis:[{name:"darthVader"},{name:"Tom"}],selected : {} state = store(state,select)output:// jedis:[{name:"darthVader"},{name:"Tom"}],selected : {name:"Tom"}
Conclusion Of Part -1
Store Contains (State,Reducers) . < — Actions manipulates Store . Store Than Call Reducers . Reducers manipulates State in redux way and at the end new object id returned
If you like the tutorial and want it to be continued please click the clap button .
