Building flexible front-ends with React and Redux
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.