Redux – simplified3 min read

What is Redux?

It’s a library for state management based on Flux pattern and functional programming.
It’s best used for medium to enterprise applications.

Why and when to use it?

When?

By adding Redux to your application you add up complexity. So when developing small apps it’s not necessary to use Redux.

Why?

We use Redux to avoid spaghetti code and ease debugging.
If you ask yourself how is that so, here is the answer?!

Keeping the state in sync

If you are developing large scale application (without Redux) you will probably end up with bunch of events flowing around between various components. You will end up with all sorts of data workflow, coming in and out, and you will not be able to track your bug easily.
Without using Redux, keeping the state in sync across the application becomes difficult.

So, benefits of using Redux are:

• decoupled architecture
• easy state management
• testing
• undo functionality (becomes breeze to implement)

Building blocks of Redux

There are three building blocks of Redux:

• Store:
  Contains state of the application (something like local client db).
  It might contain lists, props etc.
  [IMPORTANT] Only store can change the state (push,pop…)
• Actions:
  Contains objects which represent events that have happened i.e.:
  { type: ‘POSTED_BLOGPOST’, body: ‘…’ }
• Reducers:
  Are functions which specify what needs to happen depending on an action (state changes based on action responses).
  [IMPORTANT] Reducer does NOT change the state.
  He only returns a new state (hence functional paradigm)

PURE VS IMPURE FUNCTIONS

PURE ONES

Pure functions are the ones who return always the same result and do nothing else in the background.

IMPURE ONES

On the other hand Impure functions return different result each time they are called and might do something in the background.

For example, function to increment or function to add something to DB are “Impure functions”.

Example of pure vs impure function:

// IMPURE

function increment(number){
return number++;
}

// PURE

 function increment(number){
return { result: number + 1 };
}

The difference

The difference between these two are that by providing the same input for impure function, we always get other result. Result is changing the input param.

While in pure function, we always get the same result, which we expect though. There is no change of input param.

Example of Reducer

Example of writing simple reducer by following the above example would be like so:

function reducer(state, action) {
switch (action.type) {
case: 'INCREMENT':
return { result: state.result + 1 };
}
}

Redux Implementations

There are a bunch of Redux implementations for Angular like ngrx store, ngxs, rxjs or Akita.

I find Akita as the easiest one of them all to work with. A collegue of mine, introduced me to Akita so we did implement it into our enterprise application.

But generally speaking, principles are more or less the same for each and everyone one of them. That’s why I won’t go deeper into specific implementations.

There are a bunch of nice tutorials how to add and use them into your Angular applications:

• Here is one pretty good tutorial about Akita:
  https://netbasal.com/introducing-akita-a-new-state-management-pattern-for-angular-applications-f2f0fab5a8
• Here is one with RXJS implementation:
  https://2muchcoffee.com/blog/state-management-angular/
• Here is a good comparison blog post of various state managemement implementations:
  https://ordina-jworks.github.io/angular/2018/10/08/angular-state-management-comparison.html

FINAL WORDS

Bottom line is that you must use some kind of state management library when developing medium to large scale SPA applications.

It will drastically ease your debugging life, reduce spaghetti code and make your life easier when writing your tests. Since you don’t need to provide any mockup data for testing purposes (hence immutability).