React/Redux Design Decisions

Für die Erstellung unserer Benutzeroberflächen von größeren Projekten mit dynmischen Inhalt verwenden wir React mithilfe von Redux. Um die Erstellung von Reducern und Action Creators für Entitäten zu erleichtern, möchte ich hier einen simplen Denkansatz vorstellen.

Today there are various different technologies to build up your Frontend and it can be very time consuming to pick the right one for your team. Some of the most common Frameworks/Libraries are: AngularJS, ReactJS and VueJS. So, when we started our previous project Bus-Angebot in 2016, there was (and gladfully still is) a big hype about React. So we decided to give it a try and I have to say, we don’t regret it.

If you have a background in object oriented programming, the Component based approach in React and the state management with Redux could be confusing at the beginning. I assume that you have a basic understanding in those technologies, in order to follow this approach. If not, I recommend reading these informative guides for React and Redux.

Redux

As mentioned above, we use Redux for our state management, because if your project has a certain size it is a very clean way to manage the client’s state. If you are already using Redux without any extensions, you probably know that it can be a big boilerplate to write actions and reducers for every entity. There are already many wrappers and extensions on GitHub, that help you reduce the boilerplate. But I want to show you a very easy way, without any additional extensions. Keep in mind that the following code and descriptions are just snippets to illustrate my approach. But if you are already coding with redux it should be no problem to integrate it into your application.

So let’s start:

First of all we need some construct, that describes our entities. As we use ES6 and TypeScript we create a simple class to hold the most important information about a single entity (See Entity Description Class).