The three pillars of Redux

March 15, 2021

Redux, simply put, is a state management library in Javascript.

It can be used with almost any javascript based framework but it’s most commonly used with libraries/frameworks like React and Angular.

3 main components:

  1. Actions
  2. Reducers
  3. Store

Add a fourth component of ‘View’ and you get the 4 components of Facebook’s Flux architecture.

Redux = Reducer + Flux

But as Redux is more commonly used with other javascript frameworks/libraries for building user interfaces which constitutes the View layer of the Flux architecture, we’re left with the 3 main concepts of Flux which constitutes Redux.

Actions

An action is just a plain javascript object, containing an action type and the action payload. In simpler terms, it’s just a message, telling the reducer what to do and provide any data that might be needed to do that.

{
	"type": "ADD_TODO",
	"payload": {
		"title": "I am a new to-do"
	}
}

Reducers

A reducer is a pure function that ‘reduces’ the current state to some other state.

What’s a pure function? It’s a function which has no side-effects. Meaning, given the same input, it’ll always give the same output.

What does ‘reducing’ the current state mean? A reducer takes input from the action and changes the state as instructed by the action and sets that as the new state.

One main thing to note here is that state in Redux is immutable, that means it can’t be edited. So if you can’t edit a state, you copy the state, make changes to it and set it as the new state.

function addTodo(state, action){
	return state.todos.concat(action.payload);
}

Store

A store is where all the state of your application resides. You can have one big state for your app or you can make individual reducers have their own states.


Written by Gagandeep Rangi who likes to talk about himself in third person. Twitter Instagram