In this post we will take the state store created in the previous post make more redux like. The first thing we need to answer is what is redux?.
According the to offical redux website:
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.&
In simple terms, redux is a pattern to follow to manage global application data which can be shared across multiple components.
Managing State in Angular with Rxjs Managing state can be a challenage in many applications. For larger Angular projects there are libraries to solve this problem that you may have used before to manage your state; NGRX, NGSG, and a few others. These libraries are great options for larger project but can be a little time consuming to use when building small applications. One thing I’ve been looking for is a more simplified pattern for managing state in smaller Angular projects.
A very common and useful directive that we can create is a simple debounce directive. If you’re not familiar with debouncing, it essentially will discard events or values until a specified time has ellapsed between the emission of those events/values. This is commonly used to prevent spam button clicks or spamming an API call from a autocomplete/search input.
We’re going to create two debounce directives, one to debounce key up events that will be used on input elements and another to debounce button clicks.
