React, Redux, Redis, Material-UI and Firebase

Once you’ve committed to React, you find yourself without a very good way of managing a single source of truth for your application data. One of the challenges of front end development is the binding of data to UI elements and keeping everything in sync, especially if you are doing a lot of async things. Redux is about managing the state of an application – in other words the data that is being consumed or created by the UI. The key point here is that the Redux store is immutable – you can’t just change stuff in it. Instead you dispatch ‘actions’ which are handled by ‘reducers’  which in turn create a new version of the store’s contents at every change. Your UI subscribes to changes in the store and updates itself in response to changes. In fact it updates everything, all the time, but React’s model of working its own in memory DOM, means that the real DOM only gets involved if something really changes. If this sounds complicated, it is, and you feel that you are going crazy the first few actions you create. However, after a little while, you do come to appreciate the advantages.

Put simply, redis is a persistent cache but with zillions of great features. In the Ephemeral Exchange project, I use this to store the APIS back end data and to manage push notifications.

Of course I had already used Firebase in a number of projects, but I decided to use it for authentication and user management for subscribers to the Ephemeral Exchange project, although the data itself is stored in Redis, and Firebase plays no part in the back end API.

I usually use mui-css for Material Design helpers, but Material-UI has some really good React components, so it was a no brainer to move to this for this project. The only downside I’ve found is that styles are all inline without the usual kind of predefined classes you’d expect to find in an MD helper library. Everything is React is pretty much counterintuitive though, and the idea of defining styles as part of the components they apply to, rather than centralizing them in gigantic style sheets, actually works out just fine.

When developing server side apps to run on Node, it’s common to use the Express.js framework to handle routing to your app. Ephemeral exchange API runs on Node and uses Express.js

• Preserving TTL for redis item
• My server times are out of sync!
• Redis and Lua scripting
• Fixing out of sync server times
• Local variables in Redis Lua scripts

• Promise routing in Express

• Enabling clipboard copy in React

• Nice axis labels for React recharts using D3

• Creating promise actions in redux

For more like this, see

Why not join our forum, follow the blog or follow me on Twitter to ensure you get updates when they are available.