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. Thereact-reduxlibrary 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.