Angular — Redux Using NgRx The Complete Guide (Part-1)

Amey Dagaria
Nov 5 · 3 min read

Redux Introduction

Lets Start With Whats Redux :-

Redux Rest On these 3 Principles :-

  1. Single Source Of Truth :- We Have One Place Where all our data lives (State)
  2. State is read only
  3. 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 = 2
Redux 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 .

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade