Basics of Ngrx

Table of contents

Reading Time: 3 minutes

In this blog, we will understand the ngrx, state, actions, reducers and how the ngrx works.

So, let’s start with the ngrx.

What is Ngrx?

Ngrx is a state management framework to make reactive applications in angular.

It has six basic parts.

Selector

2. Store

3. Reducer

4. Action

5. Component

6. Effects

Ngrx state management lifecycle

Component is the UI part of the application where user interacts.Every interaction produces an action which describe a event, which is then dispatched to the reducer.

Reducer take the current state and the latest action to compute the new state, which is then stored in the store.

Now, it’s selectors job to select the particular piece of data in the store and pass it to the component.

And effects are used when there is no data to be processed by the reducer.

Effects job is to fulfill the data by calling the service, which further called the external database and return the data to effect and effects then produces a new action with proper data and passes to the reducer which then calculates the new state and store it on the store.

What is Store in Ngrx?

Store is a state data. It is similar to the database and whenever the component needs the data, it will send to that component.

NgRx Store enables state management for constructing maintainable, explicit apps by expressing state changes using single states and actions.

So first let’s see the example of the store:-

const state = {
user: {
  email: 'aanchal@gmail.com',
  token: 'Secret token',
},
posts: [
  {
    id: '1',
    title: 'Hello',
    description: 'Hello world',
  },
  {
    id: '2',
    title: 'Hii',
    description: 'Hii world',
  },
],
};

What type of data you should not keep in store?

1. Unshared state : If a component have some data and there is no need to send it to other component, which means it is confined to only that component then there is no need to keep the data in the store.

2. Angular forms : The form data is no need to keep in the state because it is not immutable as if you are typing something then automatically it will get changed. This conflicts with the state management principles.

When the form is submitted you can take the data and you can dispatch the action so that state will store the data.

3. Router data : Router data is not stored in the store as it has some complex data structure.

What is an action in Ngrx?

Any event performed in the component (for instance, Click event performed) dispatch an action.

You have the separate action file where the actions are written and in the action file data will be send.

In Ngrx, actions are one of the most important building pieces. Actions describe one-of-a-kind occurrences that occur across your application.

Actions represent a variety of events, including user engagement with the website, external interaction via network requests, and direct connection with device APIs.

For instance:-

const LoginAction = {
  type: 'LOGIN',
  user: {
    email: 'aanchal@gmail.com',
    password: '12345'
  }
}
const RegisterAction = {
  type: 'Register',
  user: {
    email: 'aanchal@gmail.com',
    password: '12345'
  }
}

What are Reducers in Ngrx?

Reducers are responsible for handling transitions from one state to the next state. After an action is dispatched, it perform some data.

Reducers are pure functions in the sense that they always return the same result for the same input. They have no negative effects and handle each state transition in a timely manner. Each reducer function considers the most recent Action dispatched, as well as the existing state, to determine whether to return a freshly modified state or the original state.

For instance:

const _sharedReducer = createReducer(
initialState,
on(showLoading, (state, action) => {
return {
  ...state,
  loading: action.loading,
  loadingText: action.text ? action.text : 'loading',
};
}),
on(setErrorMessage, (state, action) => {
  return {
    ...state,
    errorMessage: action.message,
  };
})
)