5 Alternatives to React Redux in 2020
Reducing boilerplates and cutting out the middleman with Redux alternatives for React applications.
Redux has become the popular state management solution for most applications using React, Vue, or Angular as front-end frameworks. One of the main reasons for the popularity of Redux is its lightweight size of a mere 2KB.
Redux works on the simple principle of storing the entire state of the application is a single central store. This store can be accessed by all components and as such, removes the need to pass parameters and properties between components. The main building blocks of Redux are its actions, reducers, and store.
Let’s look at how Redux works to understand better the difference between it and its alternatives.
So, in a nutshell, API calls from components are sent to the Reducers. They are functions that return the new state based on the older state of the object. The new state is stored in the store, which is the central entity in Redux applications that accesses the previous state.
In addition to holding the application state and controlling access to it, the store also allows the state to be updated and handles registering and unregistering of listeners via subscribing.
Why do we need alternatives for Redux?
Redux and its usage may sound simple, but there are some disadvantages associated with it:
- There is a considerable learning curve involved. Learning Redux can become further difficult as knowledge of functional programming is necessary.
- It increases boilerplating for simple changes. As the flow in redux is pre-defined, you have to stick with it. In smaller applications, that amount of boilerplate seems even more excessive.
- Even a minor change in Redux triggers the DOM restructuring process. Developers do not favor this as it is time-consuming and can adversely affect performance.
Alternatives for Redux
Many alternative State Management libraries have been created to overcome the disadvantages of Redux. Each of them has its own set of strengths and weaknesses. Let’s look at some of the top options and understand what they are best suited for.
MobX
MobX synchronizes the models and UI by applying concepts of reactive programming. It only updates the required parts of the UI instead of reloading it entirely. MobX works on Object-Oriented Concepts and data models of the application. MobX eases the documentation of classes and stores that include properties and methods that are used in the app. It supports rapid development by quick delivery of UI objects during development and allows adding the lifecycle hook “componentWillReact()” for reactive updates. This simplifies the routing and navigation of the application.
As MobX is based on classes, the serialization of objects is not as simple as it is with JavaScript. Writing custom serialization and deserialization methods is the recommended way. MobX requires that data is serialized via API calls.
Creating custom functions for undo/redo, and time travel of data changes is recommended with MobX. Below are the key features of MobX:
- It is scalable, simple to use, and does not allow normalizing data.
- It maps the relations between state and derivatives while maintaining referential integrity, leading to a reduced number of bugs.
- It eases state modifications by building a virtual derivation graph to minimize the number of recomputations needed to keep derivations in sync with the state.
- It is a JavaScript library and as such, allows you to retain the existing utilities of JavaScript.
- It can be used on the client-side as well as on the server-side.
This is an example of logging time using MobX. It uses the Observable concept to track time:
Based on its transparent reactive programming, MobX is widely used as a replacement for Redux.
Apollo GraphQL
Apollo GraphQL facilitates the data graph layer that connects modern apps to the cloud. React works with REST APIs that require data to be fetched from servers. It is necessary to fetch large amounts of data in modern and connected systems. This, however, is not feasible. GraphQL bridges this gap by allowing components to declare data. The strong end-to-end typing boosts performance between the server and application.
This platform manages data at a centralized location. You can simply connect the platforms or microservices and connect the necessary data between these systems. GraphQL does the fetching of data and data transformation. It helps to decouple services by creating an abstraction layer. GraphQL is independent of platform and language.
The ApolloBoost starter kit can be used to integrate Apollo GraphQL. You can configure your clients using this kit. It includes authentication, memory cache, state management, and error handling. Apollo GraphQL also provides the documentation required to customize Apollo Boost.
Let’s consider this example of creating an Apollo client. For Apollo clients, you need the endpoint of GraphQL. Eg: https://48p1r2roz4.sse.codesandbox.io which is a playground provided by Apollo.
Next, hook your Apollo boost to React client.
Once the query component is connected, data will be automatically cached when it is sent by the server. For customizing the endpoint, Apollo Boost provides multiple packages that are necessary to build the Apollo Client.
Context API and React Hooks
Hooks have been used in combination with context API to manage state since their inception.
Why use hooks and context? I personally prefer to use them in small to medium apps, because they make it simpler for me to publish reusable components to Bit (UI components as well as “smart” components).
Unpublished components are not going to be harder to reuse in other projects so, that’s something to have in mind.
Let’s create a UI to display a token when a button is clicked. In a React application, create a new folder with the name “context” and define TokenContext.js. We’ll define the token state and set it to “0”. Components will use TokenContext.Provider to access the state.
Now let’s create a class to display the token.
The next step is to create buttons to increment and decrement the token. Let’s create the TokenButton.js file.
Create a display class to set the UI.
We’ll now create a container called TokenView.js to allow access to the userContext hook. Now in the view folder create a view class as follows:
Now import the view file into App.js.
it will output the following result.
Pullstate
PullState works similarly to Redux, but has no class support. It uses hooks for global state management. Multiple stores can be initiated using hooks and use “useState” to access the values from the state. You can create a store and use the state of the store using the “userState()” hook. Using the hook, we make sure to use the needed state for a component.
This is an example of changing style properties using PullState. First, create a store for your theme.
Next, we’ll read our state and toggle the state on button click.
RxJs
RxJS is a reactive Extension JS library (RxJS) that uses Observables for async calls. It is event-based and is used in conjunction with Redux. RxJS gives better performance and modularity to the application, displays better debuggable call stacks, and has backward compatibility. The concepts that are most used in RxJS are Observables, Schedulers, and Subjects.
Here is a simple snippet of custom hooks for RxJS, where we:
- use the “useEffect” hook to subscribe to an Observable
- set the state for changes
- clean-up function
Conclusion
We looked at a few of the most commonly used alternatives for Redux that work independently or can interact with redux in React applications. MobX and Apollo GraphQL are the most widely used and are known for performance and the ability to connect many different platforms respectively.
Many others prefer the Reactive Extension JS (RxJS) library as it uses Hooks to replace Redux. So ultimately, it comes down to what suits your project the best.
