

Things like “if you go to this page, click on that button, then go back to the home page, grab a coffee, go to this page and click twice here, something weird happens”. As the app grew, we noticed more and more pernicious bugs, that were hard to corner and fix. Redux and Immutable: functional programming to the rescueĪ few months back, I was developing a webapp consisting of dashboards. You can see an example of such an app here. Completed todos can be deleted all at once.A counter of active todos is displayed at the bottom.For the record, the requirements are the following: Thanks to seantimm for pointing that out in the comments! The appįor the purpose of this tutorial we will build the classic TodoMVC app. If you have any questions/suggestions on the code and/or the turorial, please leave a comment or - better yet, open a Pull Request!Įdit: The article was updated to use the ES2015 syntax for React classes. A companion GitHub repo is available here, which follows the steps to the final app and has a copy of this article. If you want to dig further, I can only recommend the tutorial mentioned above. It is purposefully limited in scope (it’s client-side only, so no isomorphism a quite simplistic app) in order to keep it somewhat concise.

What follows is the first part of a tutorial that will hopefully guide you to the principles of the Redux way of doing things©. I mean – look at this (click to see in action): It seemed like an elegant solution to manage the state of React applications, plus who would say no to time travel? So I got in, read the examples in the docs and this fantastic tutorial by A Comprehensive Guide to Test-First Development with Redux, React, and Immutable (which is a major source of inspiration for this article).
