Real time features with Rails + Redux + React

For the past few months, I have been experimenting with a technology stack that I’m most interested in and in my opinion most fun to work with. To build a solid SPA (single page application), we need an API server, and a front end application which will render a view with JSON data from the server. I’m most familiar with Ruby on Rails, so I decided to build an API server with Rails (and Rails 5 ships with an API mode). As for the front end application, React + Redux is a solid way to build a reliable application. I think of React as a rendering engine sitting on your page. It’s role is straightforward; you give a current app state to React and React will render the appropriate view for you.

React : (State) => View

React is just a view library, it does not come with a state management system. That’s where Redux comes in. Redux is a lightweight yet powerful library that helps you with managing all of the front end application state. It embraces some of the functional programming ideas such as immutable data structures and function compositions. The core of Redux is reducers which takes a current state of the application and an action (which is a minimum representation of what happened in the app and data the app needs to create the next state), and gives you back the new application state.

Redux: (CurrentState, Action) => NextState

As you can see from these two bolded functions, these two library goes hand in hand. Redux takes cares of maintaining app state and React simply consumes the state to render UIs on the page. All you need to make these two work is to make sure React components subscribe to the state so that any time state updates React re-renders the view. And there is a fantastic library called react-redux to connect these two :)

Now, as for the backend I’m using Rails with an API mode (when you create a new Rails app, you just need to give api flag). To render JSON, I use Active Model Serializers, which gives you a clean and Railsy API to render JSON.

This setup gives you a very clean separation of concerns where server gives back JSON data given a URL (and token for authorizing the request), that way the server remains very stateless. It does not concern itself with managing states. It simply authenticate a request and communicates with the data store and gives back the data in JSON format. Then that JSON data goes to Redux, which will create a new application state, and then React will consume that new state to render the view for the user to see.

I really love this setup and I’m exploring new things I can do with this setup everyday. Recently I tried using ActionCable to add a real time feature to the application that I’ve been working on. I’d like to share a bit of code snippets in how I used it and to make it work in my side project.

First, you have to install ActionCable npm package.

npm install --save actioncable

Next, create a global App object to encapsulate all the ActionCable logic.

window.App = {};

And depending on the signed-in state you create a ActionCable consumer on app boots, if user is not signed in, create a consumer when user signs in.

I passed the authentication token as a query parameter so that in connection.rb in Rails you can use that token to identify the current user.

(side note: JsonWebToken module is something that I created using JWT gem, for detail please go take a look in the repo)

After creating a consumer, you request a subscription to a channel. I created a WebNotificationChannel which will be used to send new notification update. Here is the code for the channel in Rails.

and I also created a WebNotifications module in the front end so that it has subscribe and unsubscribe functions.

So now, right after the line where you created a ActionCable consumer you can call this subscribe function from the WebNotifications module, passing in the received callback function, where you will dispatch an action!

All you need to do now is to send the new notification down through the cable connection. And you can use your serializer to create the JSON response!

And that’s it! I think ActionCable opens up a lot of possible features you can implement with this setup, and I’d like to explore more and see what I can build with it.

I left out a lot of details, so if you are interested, please let me know in the comment or take a look at the github repo.

Thanks for reading!

Github URL:

Demo App URL: