What Is Redux And How To Use it ?

What is Redux

Redux is an open-source JavaScript library that helps you to manage the state of your application. For Building User Interface this is used with libraries for example React or Angular.

Redux may be a tiny library with an easy, restricted API designed to be a inevitable instrumentality for application state. It operates during a similar fashion to a reducing operate, a purposeful programming conception.

It offers following things:
• A single, immutable knowledge store.
• One-way knowledge flow.
• An approach to vary supported pure functions and a stream of actions.

Benefits of using Redux :-

• Redux makes the state predictable :- In Redux, the state is usually inevitable. If identical state and action are passed to a reducer, identical result’s forevermade as reducers are pure functions. The state is additionally changeless and isn’t modified. This makes it attainableto implement arduous tasks like infinite undo and redo. it’s additionally attainable to implement time travel that’s, the power to maneuver back and forth among the previous states and think about the ends up in period.
• Maintainability:- Redux is strict regardinghowever code ought to be organized therefore it makes it easier for somebody with information of revived to know the structure of any revived This typically makes it easier to take care of.
• Debugging :- Redux makes it simpleto correct associate By work actions and state, it’s simple to know secret writingerrors, network errors and different kinds of bugs that may come back up throughout production.
• Easy For Testing :- Easier to test Redux application because functions are used to change the state of pure functions.

When To Use Redux :

• Independent copies of the same data in multiple places.
• Multiple views that need to work with the same data and be in sync.
• Data can be updated by multiple users.

Building Blocks Of Redux :-

There are three building blocks of redux :-

1. Store: – A Single Js Object that contains the state of application. It is a local client side database.
2. Actions: – Plain JS Objects that represents something that has happened in application.
3. Reducers: – A function that specifies how the state changes in response to an action.

Pure Functions: –

A function returns constant result for same arguments. Its analysis has no aspect effects, i.e., it doesn’t alter input file. It doesn’t rely upon the external state sort of a global variable.

 

Example: –

Function reducer(state,action){

switch(action.type){

Case ‘INCREMENT’ :

return{ count : state.count + 1 };

}

}

 Benefits of Pure Functions :-

1. Pure functions are easy to test.
2. Easy to undo/redo(Because we always keep the previous state instead of modifying it.)
3. Gives as a Powerful tool which we call Time Travel Debugging.

Installation :-

@angular-redux/store includes a peer dependency on redux,Because of that we must have to install that dependency.

npm install –save redux @angular-redux/store

 

Example:-

Import the NgReduxModule class and add it to your application module as an import. Once you’ve done this, you’ll be able to inject NgRedux into your Angular components.

import { NgReduxModule, NgRedux } from ‘@angular-redux/store’;

import { createLogger } from ‘redux-logger’;

import { rootReducer } from ‘./reducers’;

 

interface IAppState {

/* … */

}

 

@NgModule({

/* … */

imports: [, /* … */ NgReduxModule],

})

export class AppModule {

constructor(ngRedux: NgRedux<IAppState>) {

ngRedux.configureStore(rootReducer, {}, [createLogger()]);

}

}

Now You installed Redux in your Angular Application! Use the @select decorator to access your store state, and .dispatch() to dispatch actions:

import { select } from '@angular-redux/store';

@Component({

  template:

    '<button (click)="onClick()">Clicked {{ count | async }} times</button>',

})

class App {

  @select() count$: Observable<number>;

  constructor(private ngRedux: NgRedux<IAppState>) {}

  onClick() {

    this.ngRedux.dispatch({ type: INCREMENT });

  }

}

Source :-  https://www.npmjs.com/package/@angular-redux/store

https://blog.logrocket.com/why-use-redux-reasons-with-clear-examples-d21bffd5835/