Redux : Core concepts and terminology explained with an example

As per the official documentation, Redux is a predictable state container for Javascript objects. If you are familiar with React, you will be aware that each Component will have its state and it may become complex to manage the state of different Components as the complexity of application grows. Redux would be very helpful in managing the state of your React project. Although, in this post, I'll stick with the basics of Redux, which is a standalone Javascript package and can be used with libraries other than React.

Let's start by understanding the essentials for Redux :-

Store : Store is basically a container which holds your application state. It is the core of the Redux project. Each project will have only single store and will provide methods for the following main activities :-

• Get the current state of the Store
• Update the state of the Store
• Subscribe/Unsubscribe listeners to the state change events

Actions : Actions are payload of information that are dispatched by your application and contains the information required to update the state of the store.

Actions are typically a javascript object which MUST have a type property along with other optional data. e.g. A task manager app will have the following action for new task

const ADD_TASK = 'ADD_TASK';

{
  type : ADD_TASK,
  id : 1,
  task : 'my first task'
}

Action Creators : Action Creators are nothing but functions which will create the actions. It is a good practice to use action creators to dispatch the actions.

const ADD_TASK = 'ADD_TASK';

function addTask (id, task) {
  return {
    type : ADD_TASK,
      id : id,
      task : task
   }
}

Reducers : Reducers recieves the actions dispatched by the components and change the state of the store. As mentioned before, there can be only one reducer which will interact with store to change the state. However, it is possible to have multiple reducers in your project and then all reducers will be combined to a single reducer.

Subscription Model  : Whenever the state of the store is updated, it will inform all the listeners regarding the state change who would have subscribed to the store changes.

Example : 

Below is the example created for a counter in which two actions ADD & REMOVE are used to increment and decrement the counter by some value. It also uses subscriptions, which are called automatically on state change.

 JsFiddle Link :-

// Function to print output
function out() {
  var args = Array.prototype.slice.call(arguments, 0);
  document.getElementById('output').innerHTML += args.join(" ") + "\n";
}

// Initial State for the store
const initialState = {
  count: 0
}

// Reducer to handle actions and update store
const reducer = (state, action) => {
  if (typeof state === 'undefined') {
    return initialState
  }
  switch (action.type) {
    case 'ADD':
      return {
        ...state,
        count: state.count + action.value
      }
    case 'REMOVE':
      return {
        ...state,
        count: state.count - action.value
      }
    default:
      return state
  }
}

// Create a store
const store = Redux.createStore(reducer);

// Subscriptions 
store.subscribe(() => {
  out("Automatic Message from subscription : " + store.getState().count)
})

// Display current state of the store
out(store.getState().count)

// Dispatch an action and display results
store.dispatch({
  type: 'ADD',
  value: 5
})
out("Explicit print call : " + store.getState().count)
store.dispatch({
  type: 'REMOVE',
  value: 2
})
out("Explicit print call : " + store.getState().count)