Difference between to Relay (with GraphQL) and Redux?

Question

Are Relay and Redux alternatives to each other? When are they best used with? Can we use Relay, GraphQL with Redux?

Answer 1

REDUX:

1. Redux is library
2. Redux is a state container for your app
3. Its a single point source where all information related to your app is stored.
4. You create actions,reducers and update your state by dispatching actions.
5. The state is immutable and you cannot update it. Always a cloned version of state is returned.
6. You use packages like redux-thunk / redux-saga to call apis. On Response of API's you update your state.

Now if you see in redux there is a lot of boilerplate code.

I personally find redux really cool and handy but you need to take care of following:-

1. Creating actions/reducers/store.
2. Dispatching actions and updating store.
3. Handling api calls.
4. Implement caching.
5. Maintaining store.
6. Maintaining expected props in components.

RELAY:

1. Relay is a Javascript Framework.
2. Handles store for you. You dont have to worry about updating store
3. Takes care of your API calls(this is the best feature)
4. Store is immutable and clone version is returned.
5. Works with GraphQL(this part is bit tricky as you need to understand graphql as well). After working on this for sometime I realised this is one major drawback. But once you understand graphql its really powerful
6. Works on queries and mutations

Relay is really really powerful and provides following benefits:-

1. You dont need to work about API calls. Relay network layer takes care of it. You do that through specifying queries and mutations
2. One of the best features of relay which makes it really useful is caching implementation. It reduces api calls drastically.

Relay is really really powerful but you there is bit of overhead when you get started. Following are the pre-requisites:-

1. React
2. Graphql
3. ES2015 JS

Once you are done with prerequisites also understanding how relay actually works is bit tricky and not as easy as redux. But once you understand how it works and why was it brought into picture you would really be amazed. Its indeed a really powerful tool.

So in case of your project is small-medium sized I would say go with redux and if its on large scale relay. But if you are working on react-native do give relay a try , its really interesting.

Also,yes you can use redux with relay.