Beginner's Guide to ngrx and Angular

 What is RxJS?

RxJS is a JavaScript library for reactive programming that allows you to work with asynchronous or callback-based data streams.

NgRx stands for Angular Reactive Extensions. It is a state management system that is based on the Redux pattern.

RXJS + REDUX= NGRX

RXJS -> Observables

Redux is basically a global state mgmt. library taken from react. it is a storage facility that helps JavaScript applications to manage state.

So, now, we will see the overall concept of Redux and see how's it works. Here, we can see that we have a component, and when a user performs an action, it will change the state of the data within the application.

There are some main concepts of state in an angular application.

1. Store
2. Reducers
3. State
4. Actions
5. Selectors
6. Effects

States of an app in Redux are kept in the store. The states are updated using actions transported to pure functions called reducers. Reducers take in state and action as parameters and performs an immutable action on the state and returns a new state.

Store

A store is basically a JavaScript object that holds data we’ll be using in our application.
A simple store takes the following format:

const state = {

    persons: [

        {

            name: "Wisdom Ekpot",

            age: 10

        }, {

            name: "John Cat",

            age: 40

        },

        {

            name: "James John",

            age: 11

        }

    ],

    bookDescription: {

        name: "Name of book",

        author: "Wisdom Ekpot"

    }

}

Reducer

A reducer is a pure function that accepts two parameters - an action and the previous state with a type and optional data associated with the event. Pure means that the function always returns the same value for the same input. It generates a new state based on an action. 

Sample Reducer 

export function reducer(state = initialState, action: articles.Actions):State {

    switch(action.type) {

        case 'ADD_ARTICLE':

            return { 

                articles: [...state.articles,action.payload]

            }

        default:

            return state;

    }

}

State

Theoretically, application state is the entire memory of the application. In simple terms, application state is composed of data received by API calls, user inputs, presentation UI state, application preferences, etc. A simple, concrete example of an application state would be a list of customers maintained in a CRM application.

Actions

An action is an instruction that you dispatch to the store, optionally with some metadata (payload). Based on the action type, the store decides which operations to execute. payload is an optional attribute that will be used by reducers to modify the state. 

When an action is dispatched, the reducer takes it and applies the payload, depending on the action type, and outputs the new state.

// Action interface

export interface Action {

    type: string,

    payload?: any

}

// Action with payload

dispatch({type: 'ADD_ARTICLE', payload: {link: 'github.com/philipszdavido', points:90}})

// Action without payload

dispatch({type:'LOAD_LINKS'})

Selectors: Selectors are pure functions used for obtaining slices of the store state.

Dispatcher: Dispatchers are simply an entry point for you to dispatch your action. In Ngrx, there is a dispatch method directly on the store.

How it Works

When an event is emitted, for example, a button is clicked, the action is sent to a reducer function to convert the old state into the new state:

{ type: 'DELETE_ITEM', payload: 123 }

Here, you can see that in action, Delete_Item is our action name and 123 is an action data.

References: https://stackabuse.com/,
https://betterprogramming.pub/,
https://dzone.com/,
https://www.youtube.com/