07/08/2018

Building flexible front-ends with React and Redux

We’re really enjoying using React and Redux for our user interface development. We’ve been splitting up our front-ends into discrete components at a high level, using libraries such as Kendo UI, for some time but it really helps to have support for components down to the code level. React and Redux are JavaScript libraries – and JavaScript itself has undergone some significant changes in recent years. Many of the changes are often dismissed as ‘syntactic sugar’ but they’ve made our code much more fluid, clear and easier to maintain.

One common problem with front-end development is managing state. State is just the data the front-end holds to enable interaction with the user – things like field contents and on/off flags. For complex developments the updating of state, triggered by user actions, can happen anywhere in the code. This can make tracking down issues difficult and can lead to race conditions where the ordering of updates to fields can get out of sync.

Here’s where Redux comes in. Redux is, essentially, just an approach to writing code about state. It mandates that updates to state only ever happen in one place in the code. It defines a ‘Store’ as the state of the whole application. Updates to the Store can only be achieved through ‘Actions’ – these are simple pieces of code that specify the required change in state. The actual updating of a Store is achieved, in a single place, through a ‘Reducer’. Initially a bit of an odd name but a Reducer simply take two inputs - an Action and a Store – and reduces those down by applying the Action to create a fresh new Store. That’s all they do – no calls off to other things – no side effects – just that. Nice, clean and simple.

Redux Overview Diagram