Difference between : Redux and Relay

reactjs redux relayjs
Sachin picture Sachin · Jun 26, 2016 · Viewed 9.6k times · Source

I have read number of articles/docs based on redux and relay but still I am confused how this two libraries are different?
What are the advantages and downsides of this this two libraries?
What is the exact role of GraphQL in relay?
Which is the library more suitable for enterprise data driven applications like CRM/ERP?

Answer

Gershon Papi picture Gershon Papi · Jun 26, 2016

Both are Flux implementations, a Facebook framework for managing application's state.

  • Redux: general javascript library which helps handle state management in your application. Redux is not react-dependent and can be used with any library. The react-redux library is used to easily integrate react with redux. In redux the application state is located in a single store, each component can access the state, and can also change the state by dispatching actions. Redux doesn't handle data fetching out of the box, though it can be done manually: simply create an action that fetches the data from the server into the store.

  • Relay: Created by facebook for react, and also used internally there. Relay is similar to redux in that they both use a single store. The main difference is that relay only manages state originated from the server, and all access to the state is used via GraphQL querys (for reading data) and mutations (for changing data). Relay caches the data for you and optimizes data fetching for you, by fetching only changed data and nothing more. Relay also supports optimistic updates, i.e. changing the state before the server's result arrives.

GraphQL is a web service framework and protocol using declarative and composable queries, and solves problem like over fetching and under fetching, it is believed to be a valid candidate to replace REST.
GraphQL is not relay dependent, other way around, relay depends on graphql. Graphql can be used in redux same way every other data fetching is done.

As you can see the main advantage of relay over redux is that data fetching is already taken care of, and very optimized for that.
On the other hand, it can't manage client's specific state, but that is rarely needed.

Also, IMO Relay is harder to learn and implement, but the end result is better and more optimized, but for small applications I'd go with redux.

Related questions

Relay vs Redux vs Apollo with GraphQL and React-Native

I have to start a new (web + native) project (mid-size app) from scratch. Due to the plethora of JS frameworks and implementation out there especially in the last couple of years, I have been having a second doubt on my …

Read More
React - Display loading screen while DOM is rendering?

This is an example from Google Adsense application page. The loading screen displayed before the main page showed after. I don't know how to do the same thing with React because if I make loading screen rendered by React component, …

Read More
Why use Redux over Facebook Flux?

I've read this answer, reducing boilerplate, looked at few GitHub examples and even tried redux a little bit (todo apps). As I understand, official redux doc motivations provide pros comparing to traditional MVC architectures. BUT it doesn't provide an answer …

Read More