React Baby Steps Series: Redux Basics

All right. It’s baby step time.

I spent quite some time understanding Redux. Redux itself is a very cool library that controls data flow. The beauty is its simplicity and the ability manage the state of your application. However, to use Redux with React is another problem from and other world for me. I found myself stuck in the mud so many times trying to get my React components work with Redux.

So, in this blog, I’ll be introducing the concepts of Redux and leave the React-Redux interaction to the next blog.

Let’s get to it.

Redux has three building blocks. Store, Action, and Reducer.

Store

Store is the place for storing the state of your whole application. State of your application describes your application. It holds the data that reflects on your UI. Redux store is the warehouse where we save that data, and provides methods, getState, dispatch, and subscribe, that allow us to manage our states.

const store = createStore(reducer)

Don’t worry. We’ll talk about reducer very soon.

Action

Action tells the store what we want to change in the state. Every time you want to change the state, you dispatch an action.

store.dispatch({
  type: 'ADD_TOY_ACTION',
  toy: 'Buzz Lightyear'
})

An action is a simple object with a required property type. Type tells the store what kind of action it is so that the store knows how to change the state. The other properties in an action are the data that you need to change the state. The action above is telling the store to add a toy “Buzz Lightyear” in the state.

Note that dispatch function is provided by store.

Reducer

Reducer specifies how to change the state. It’s a pure function that takes the previous state and an action you want to perform, and return the next state with the change you want to make.

const reducer = (state = { toys: [] }, action) => {
  switch (action.type) {
    case 'ADD_TOY_ACTION':  
      return {
        toys: [
          ...state.toys,
          action.toy
        ]
      })
    default: 
      return state
  }
}

When it’s action ADD_TOY_ACTION, the reducer will a return a new object with the new array of toys and add the new toy in the array. Instead of mutating the previous states, we create new states to keep our reducers pure functions.

This is how we tell a store how to change our state. We define the reducer, create a store with it, and say to the store “Hey, add the toy I have in the state”. The reducer will return a new state with the new toy in the state.

To have a clear look at the store, action, and store

import { createStore } from redux
const store = createStore(reducer)
store.getState() /* { toys: [] } */
store.dispatch({ type: 'ADD_TOY_ACTION', toy: 'Buzz Lightyear' })
store.dispatch({ type: 'ADD_TOY_ACTION', toy: 'Rex' })
store.getState() /* { toys: ['Buzz Lightyear', 'Rex'] } */

Once your state changes, it is expected that there are something you want to change on the view according to the new state. This is where store.subscribe comes in. It allows the store to listen and respond to change of state.

// show toys on the view every time the state changes
store.subscribe(() => showToysOnView())

The cool part of it is that store.subscribe returns a function for unsubscribing.

let unsubscribe = store.subscribe(() => showToysOnView())
store.dispatch({ type: 'ADD_TOY_ACTION', toy: 'Sheriff Woody' })
store.dispatch({ type: 'ADD_TOY_ACTION', toy: 'Aliens' })
// stop listening the state change
unsubscribe()

As you can see, Redux provides a very clear way of managing states.

The basic idea of Redux is that Reducers change state in Stores with the data contained in Actions.

Here you have it:)

Drop me a comment or find me on twitter if you have any question!