Building Add activity demo app using React, Redux & ImmutableJS

Share

A typical reactJS based application is usually composed of several UI components that share data. Multiple components are tasked with the responsibility of displaying different properties of the same object. The object represents state which can change at any time. To keep our code simple, we’d need to manage our state elsewhere.

In this blog we’ll pair React with two libraries and use them to build the Add activity app.

Redux

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

At the core of a Redux store is a function that takes the current application state and an action and combines them to create a new application state. We call this fun a reducer.

Our React components will be responsible for sending actions to our store, and in turn our store will tell the components when they need to re-render.

ImmutableJS

Because Redux doesn’t allow us to mutate the application state, it can be helpful to enforce this by modeling application state with immutable data structures.

Demo

We’re going to use React with Redux and ImmutableJS to build Add activity app that allows us to add new todo activities and toggle them between complete and incomplete statuses.

To make the immutableJS work we have to make some slight tweaks to our components. Anywhere there was a property access before (e.g. todo.isDone) needs to become a method call instead (todo.get(‘isDone’))

Actions

In this application we’ll only need two actions, one to add a new todo and the other to toggle an existing one.Each action is a JavaScript object with type and payload properties. The type property helps us decide what to do with the payload when we process the action.