NGRX with Angular 16

Let's dig into this with actually working on the project:

Clone

run these commands in terminal:

ng install or yarn install

run the project with command

ng start

After running the project you will see output like this:

2. Add actions and dispatched them from incrementand decrement button in grocery component - using action, reducer and selector.

• Dispatching action -> You have dispatched action from increment button in grocery.component.ts file. so, whenever you push increment button on UI, you will see action displayed in redux devtool.

• Better synax of creating action
  -Add actions folder in store folder
  -Add file bucket.action.ts
  -Add below code there
  

import { createAction} from "@ngrx/store";

import { Bucket } from "src/models/bucket.model";





export const addToBucket = createAction(

    '[Bucket] Add to Bucket',

    props<{ payload: Bucket }>()

  );

and this is how you can dispatch action in grocery.component.ts

• Bind Dispatched action with reducer and update the state.

Action will dispatched from grocery component → bucket.reducer → we will modify the state

i)Create another file bucket.reducer.ts in store/reducers folder.

Here it takes action and we telling what to do with data- so this addToBucket has access of 2 things - state and action - so in state we are sending the state as it is and new payload as action which we are dipatching the action from component.

import { createReducer, on } from "@ngrx/store";

import { Bucket } from "src/models/bucket.model";

import { addToBucket, removeFromBucket } from "../actions/bucket.action";





const initialState: Bucket[] = [];



export const bucketReducer = createReducer(initialState,

    on(addToBucket, (state, action) => {



            return [

                ...state,

                action.payload

            ]



    }),

);

Now you can see in redux devtool, when we are pushing increment button it dispatch the action with payload which we are collecting in reducer and adding new state.

• Remove bucket item from reducer state
  Create action remove from bucket

Listen this dispatched action in bucket reducer.

import { createReducer, on } from "@ngrx/store";

import { Bucket } from "src/models/bucket.model";

import { addToBucket, removeFromBucket } from "../actions/bucket.action";





const initialState: Bucket[] = [];



export const bucketReducer = createReducer(initialState,

    on(addToBucket, (state, action) => {

        const bucketItem = state.find(item => item.id === action.payload.id);

        if (bucketItem) {

            return state.map(item => {

                return item.id === action.payload.id ? { ...item, quantity: item.quantity + action.payload.quantity } : item

        });

        }else{

            return [

                ...state,

                action.payload

            ]

        }

    }),



    on(removeFromBucket, (state, action) => {

        const bucketItem = state.find(item => item.id === action.payload.id);

        if (bucketItem && bucketItem.quantity > 1) {

            return state.map(item => {

                return item.id === action.payload.id ? { ...item, quantity: item.quantity - 1 } : item

            });

        }else{

            return state.filter(item => item.id !== action.payload.id);

        }





    })

);

Now, you see after decrement button pushed the quantity of item will reduced by 1.

3.Show the added grocery item in bucket component - using selector

We are selecting the state in bucket.component.ts file

And this is how it looks - added milk 2 times - so the action is dispatched and selected in bucket component.

• Use in grocery.component.ts file like this

5.Add Selector which select only type of grocery

• Create selector selectGroceryByType

• this is how it select only fruit type

modify the selector for choosing type only

Now, when you select from dropdown you will see the items for selected type only.

• We have db.json file where there is list of the items, now we will use that and will fetch the items from here using effects.


• Add this line in package.json file

2) Create grocery.effects.ts file in store\effects folder

4) Create actions

6) Add reducer for the actions

8) This is how api will call and shows the data, see the networktab in the right side

.

Happy learning!