Denis Jakus

Demystifying Tech & Management

CTO x Unique People

IT Consultant

Denis Jakus

Demystifying Tech & Management

CTO x Unique People

IT Consultant

CTO Note

Redux – simplified3 min read

31 July 2019 Javascript
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:

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).

Taggs:
Related Posts
Learn how to use async inside useEffect hook

Facebook Twitter Evernote Hacker News Gmail Print Friendly Yahoo Mail reddit LinkedIn Blogger Tumblr Like Did you stumble upon a…

Javascript Splice VS Javascript Slice

Facebook Twitter Evernote Hacker News Gmail Print Friendly Yahoo Mail reddit LinkedIn Blogger Tumblr Like Little chit-chat Hi! Let me…

2 Comments
  • I know this if off topic but I’m looking into starting my own blog and was curious what all is needed to get set up? I’m assuming having a blog like yours would cost a pretty penny? I’m not very web smart so I’m not 100% positive. Any tips or advice would be greatly appreciated. Thanks| а

    • Denis Jakus 20:42 27 January 2020 Reply

      Hi!
      First of all, thank you for reading my blog. I hope it’s helpful to you.
      Starting your blog, especially if you are not that web-tech savvy, is pretty easy. Just register to http://www.medium.com and start writing.
      The two things that are really important are: consistency and topic.
      So choose your topic, write posts and schedule them in a consistent manner.
      As said previously, I suggest medium.com. It’s great if you want to be focused on just writing!
      Cheers

Write a comment