Many companies and developers ask themselves this question if they start talking about managing data inside a react app. Usually, criteria are simple: easy to set up, easy to work with, decent documentation, large community. If we start considering relay and redux by these criteria which one will win? Let’s figure it out!
What is Relay?
Relay is a data manager from Facebook. It was initially built for react-native apps but later it became a tool for web apps as well.
The idea of Relay is simple: you app needs to fetch only data your users need. It’s declarative way of describing what data is needed. A simple relay query would look like this:
We ask for user’s first name and last name. The server will only return to us these two fields. No more.
Relay requires your server side to support query language requests.
Relay has some outstanding features out of the box, such as caching requests, optimistic updates, smart data updates(removing, adding, updating data).
What is Redux?
I guess that everyone who reads this story knows or at least has heard about redux. It is a state container for javascript apps. It gives you an opportunity to keep your state in one place. The idea of redux is to have one-place-of-truth. Any data manipulation should be done using redux, whether you dispatch an action to update your data or getting it.
Redux itself is pretty simple and has only a few internal things(store, dispatch/action, reducer), everything else is your imagination. It is pretty solid and stable library with a huge community over the world.
Redux doesn’t have any features like Relay has. Whatever you want from Redux you have to build yourself(or find it in GitHub). You decide how to fetch, what data to fetch, how to store it and how to update it. Redux doesn’t require anything from your server side, it only requires you to follow simple rules.
When to use Relay?
- Obviously, you need to use Relay if your server side is supporting graphql queries.
- Relay takes all queries which need to be fetched from the server side and send only one request to the server side which speeds up app noticeably. Creating an XHR for every request is expensive this is why engineers from Facebook decided to collect and combine all queries into one XHR.
- Relay was made to work with a big amount of data, so if your app is going to be large in terms of data stored on a client-side you need to give Relay a try for sure.
- If you going to use React-Native you also might find Relay is suitable, because Relay only asks for data it needs, so for users with 3G network connection it would be crucial to saving some traffic.
- You are going to give the best user experience you can, so you may also consider relay because of its cool features: optimistic updates, caching requests and etc.
- You have time to spend on investigating some problems and things because documentation of Relay is not ideal. Sometimes you need to give deeply into the source code.
When to use Redux?
- Your app is simple in terms of data usage. You don’t need to update many things in your store which depend on something else. A good example would be a todo app, you don’t really need to have any data manager there, but redux would be ok.
- Your app is using web-sockets. Redux is much simpler to work with web-sockets, all you need to do is dispatch an action when a message comes. Easy!
- You don’t have graphql on your server side.
- You don’t have time to set up a data manager and your deadline is yesterday.
- You don’t need to give the best UX. No optimistic updates, no caching.
Which one should you choose?
Of course, it depends on an app you are building, in one hand we have Relay:
- Better UX our of the box.
- Better data fetching.
and in another hand we have Redux:
- Easy to set up and to work with.
- Does not require additional knowledge about the server side.
It is absolutely up to you which one you pick. This kind of decisions has to be made in the begging of development so be careful with your desires.
Conclusion
Whether you use relay or redux or any other tools it only matters how you use them. There is no bad tool or language there are wrong decisions make at the very first place. You can always use Relay with Redux, as I do. I use Relay to store business data and Redux for some temporary things such as themes, locales, filters.
Like the story? Share & Clap it. Thanks.