Redux Article

Introduction

Redux is a JavaScript library which is open source and manages application state. It is most commonly used with libaries such as React and Angular for building User Interfaces (UIs). It is similar to Facebook's Flux architecture, and was created by Dan Abramov and Andrew Clark.

Redux was first released to the public in mid 2015.

Redux is a very small library with a simple API designed to be a predictable container for application state and use operates similarly to a reducing function (hence the name), which is a functional programming concept. It was influenced by the functional programming language Elm.

Features

Model Plugin concept - The state, assuming it is a plain object, acts like a model, except there are no setters. This is so that different parts of the code can't change the state arbitrarily, causing hard-to-repoduce bugs.

Redux APIs - Redux uses its own APIs which can be very beneficial to the programmer. However 90% of the code people write in apps compared to Redux is in plain JS.

There are three principles for Redux. These are:

Single source of truth - The State of your whole application is stored in an object tree within a single tree. This makes it easy to create universal apps as the state from the server can be serialized and hydrated into the client with no extra coding effort. A single state tree also makes it easier to debug or inspect an application.
State is read-only - The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbcks will ever write directly to the state. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for. As actions are plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.
Changes are made with pure functions - To specify how the state tree is transformed by actions, you write pure reducers. Reducers are just pure functions that take the previous state and an action, and return the next state. You can start with a single reducer, and as your app grows, split it off into smaller reducers that manage specific parts of the state tree. Because reducers are just functions, you can control the order in which they are called, pass additional data, or even make reusable reducers for common tasks such as pagination.

Pros/Cons

Redux has its pros and cons:

Pros	Cons
Redux has one store and encourages using simple reducer functions to interact with various properties on the store.	However, Flux has multiple stores and a central dispatcher to manage communicatio to those stores, this can be more powerful if used correctly.
DOM binding isn't our concern - React components are split across multiple areas of code with single responsibilities. From the React developers perspective, we have the form element selection (React does this), the form event listening (our Component does this), the AJAX request (a Redux Action), the state updates (a Redux Reducer) and the rendering (React-Redux does this). No more tightly coupled code. No more defining awkward un-semantic classes in your HTML to suit your JS. Elements are bound directly to functionality.	Possible additional installation of Software and more to learn overall
Separation of data and presentation - React provides little more than a presentation layer. Although React components do have a concept of "state", this is best used for ephemeral storage. Anything you could lose on a new render can go in React state, although when combined with Redux, putting as much of your data in your Redux store as possible generally gives the best results, as it allows complete separation of state (Redux's concern) and presentation (React's concern).	Community conventions are still developing - Change is rapid, things change quickly, library functionalities change and you will have to keep up with each update to make sure you keep on top of them.
Never think about rerendering! - The benefit of this separation of concerns is you don't have to concern yourself with whether something has been rendered before, or whether it's the first time. Since React rendering immutable, the first render and the 100th render of the same component are handled the exact same way. When state changes, Redux re-renders relevant components on the page.	Build tools are necessary - For all front-end apps but the absolute simplest, decent build tools are highly recommended. For simple apps you can often get away with shell scripts in your 'package.json' file. For more complex apps, you might want to use a tool like Gulp to manage multiple tasks. These build tools are useful but remain complex. Build tools are a pain.

Extra Programs

Front End JS based frameworks - React, Vue.js, AngularJS
Front End Technologies - HTML, CSS, JavaScript
Other Front End Technologies - AJAX, XML, JSON, Node.js
Similar programs - Flux
Designing Apps - SOLID, DRY (Dont Repeat Yourself)
Types of Applications - Single Page Applicatios (SPAs), Multi-Page Applications (MPAs)

Sources

Summary

In conclusion:

Redux is a extremely useful library to use in help with making React and Angular based web applications. It makes processes such as states so much easier which can speed up things. It is hard to learn, as well as React and Angular is too but is well worth it. Flux is also very good too and may overtake Redux one day.