, the creator of Redux recently published an article “ ” where he pointed out that developers opt Redux as a de facto when building React apps, without even considering if they actually need it. Dan Abramov You Might Not Need Redux Redux is not to be blamed. Like any other library, it offers some tradeoffs like touching three files to achieve simple tasks, describing the state and actions as plain objects and arrays and handling the logic via pure functions. These constraints enable easier debugging, better testability, guarantee the user-interface to be predictable with the state and a lot more out-of-the-box. But, writing so much to do so less brings in some annoyance and slows down the overall development. Do we really need a state management library? Can’t we just define plain ES6 classes as models and store their instances in an array collection without using a library? Yes, we can! But, the problem isn’t the data storage or retrieval. Side-effects of data mutation includes actions like The real problem is how do we detect data mutation and handle its side-effects. Syncing the UI with the change in data Re-calculating the computed variables Navigating to a different route If we mutate the data using assignment operator (like user.name = “John Doe”), we don’t have a mechanism to detect the change ( has been deprecated). Object.observe() That’s exactly where we need state management libraries. Redux detects such changes by enforcing data mutation via pure functions called reducers. How other frameworks solve it? uses “ ” where the new and old data tree are deeply compared in successive cycles. It is tempting at first but kills the performance at scale. Dirty checking: Angular 1.x dirty checking mechanism and use the concepts of reactive programming which makes data propagation and change detection easy to understand and scale. Reactive programming: Angular 2 Meteor Similar to reactive programming concepts, Observer pattern triggers events on data mutation. and use observer pattern. Observer pattern: Knockout.js MobX The good old setter and getter methods have solved the problem of change detection for years which has been used by and . Setter and Getter: Ember Backbone What are the alternatives to Redux? this.setState() React comes with it’s own method of change detection at the component level. If you’re new to React, just stick to this.setState() approach. It works well for small apps. For eg: Simple Todo App Reactive and Observer patterns with React ) It has a very small footprint. If you’re comfortable using object-oriented pattern, this one is for you. With the use of ES6/7 decorators you hardly feel you’re using any library. MobX (aka mobservable : “The Reactive Extension of JavaScript” as they call it. RxJS is a beast in itself. In simple terms, RxJS = Observables + Operators + Schedulers. Though it’s famous as a standalone library, it has some neat . RxJS : bindings for React Other Flux implementations Isomorphic flux implementation which is clean and easy to understand. You need to wire up listeners to the components much like other flux implementations. Alt : One of the early implementations of Flux architecture which has some limitations and most of the developers who used Reflux have . Reflux : moved to Redux or other libraries The official framework built by Facebook which uses React along with GraphQL protocol in the back-end. which is created using the connect() method. Relay : Relay’s Container components directly compares with the Container component of Redux My Personal Choice: MobX [Update Oct 24th 2017] I have started to use mobx-state-tree which is a state container and uses MobX. Why MobX? The best part of MobX is that it , it transparently applies reactive programming concepts (TFRP) to your data models and updates a part of the UI whenever it is required. takes the pain away of adding listeners for the data changes : You can use the good old object oriented concepts and apply it to the data models in your app. Object Oriented concepts for the win : As a tech lead, MobX makes my job very easy to document all the classes and stores with the properties and methods which needs to be built. Easy to document and communicate You can focus on the business logic of the app and deliver things quite quicker compared to other libraries. Rapid development: adds a lifecycle hook called for reactive updates. This hook can be used in Routers and Navigators. Added lifecycle hook whenever there is a reaction: mobx-react componentWillReact() Tradeoffs? If you choose one library over the other, you gain something and you lose something. Here are some of the tradeoffs MobX offers: Since we use classes and derived objects instead of plain JavaScript objects, the data can’t be serialized straightaway. You need to write your own toJS() and fromJS() methods with every class Data needs to be serialized every time when the data goes out of the execution environment like when making API calls, storing it in LocalStorage, populating the stores in the back-end from other data sources and so on. Unlike Redux, features like undo / redo and time travel of data changes needs to be built by hand. The bottom line It’s not set in stone that you have to use a specific state management library with React. It’s a personal choice of paradigm which you and your team is comfortable with. The community can be misguiding sometimes. So, before you include a library, think twice about the constraints and tradeoffs the library offers. Did I miss anything? Feel free to add a response to the article for any correction, opinions and discussions. If you liked the article, consider recommending it. I am and we are building at . Sanket NativeBase.io GeekyAnts is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories
