Intro to Redux in React

Redux is a JavaScript library used to manage the state of an application. It is very popular and is commonly used in React applications, although it can also be used with other libraries such as AngularJS, Vue.js, Polymer, Ember, Backbone.js and Meteor. Redux maintains the state of an entire application in a single immutable state object that cannot be changed directly. When something in the application changes, a new state object is created using actions and reducers. I will be discussing some of the basics of Redux here.

Store

Redux believes in maintaining a 'single source of truth'. That means that there is only one place in the application where all of the state is stored. Conveniently, in Redux this is called the Store. The Store, like almost everything in JavaScript, is an object, and this special object comes with some helper methods in order to register event listeners, dispatch actions, and access the state in addition to holding the state tree of the application. In order to create a Redux Store you need to call createStore() and pass it the reducer, the [preloadedState], and the [enhancer].

Arguments

reducer (Function): A reducing function that returns the next state tree, given the current state tree and an action to handle.

preloadedState (any): The initial state. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you produced reducer with combineReducers, this must be a plain object with the same shape as the keys passed to it. Otherwise, you are free to pass anything that your reducer can understand.

enhancer (Function): The store enhancer. You may optionally specify it to enhance the store with third-party capabilities such as middleware, time travel, persistence, etc. The only store enhancer that ships with Redux is applyMiddleware().

Returns

(Store): An object that holds the complete state of your app. The only way to change its state is by dispatching actions. You may also subscribe to the changes to its state to update the UI.
_{from redux.js.org}

Actions

Actions are objects that describe changes that happened in the application. Actions are the only way to send data to the Redux Store, which means that all data collected from user interface events, network callbacks, or other sources must be dispatched as actions. Actions have to have a type field which specifies which action is to be performed by the reducer. The actions do not actually change the state, they just send information to the reducer.

Reducers

Reducers are functions that accept an accumulation and a value and return a new accumulation. They are used to boil a collection down to a single value. Reducers are common in computer programming, and most of us have used the built in versions already, such as Array.prototype.reduce() in JavaScript (which should not be ripped off of the Array prototype to reduce a string). In Redux, the collection being reduced to a single value is the state, and the values being accumulated are the actions. Reducers take the previous state value and the action being dispatched to it and return a new state for the application.

If your application has more than one reducer they can be combined with the aptly named combineReducers() helper function into what is conventionally called the rootReducer. combineReducers() merges all of the reducers in the app into one root reducer. Every reducer is responsible for its own part of the app state, and the state parameter is different for every reducer. This makes it much easier to understand and follow where code is coming from and to maintain file structure.