Relay

Relay is a data management library for React that lets you fetch and update data with GraphQL. It works closely with GraphQL APIs and optimizes data fetching by using a declarative approach and a concept called GraphQL fragments. React Relay is basically a framework used to build GraphQL-driven React applications. It keeps the management of data-fetching easy, no matter how many components your React app has.

Syntax:

import { RelayEnvironmentProvider } from 'react-relay/hooks';

Redux is an open-source JavaScript library for state management in applications, commonly integrated with React or Angular. As the official React binding for Redux, React Redux enables components to interact with a centralized Redux Store, facilitating scalable state management through a unidirectional data flow model.

There are 3 major components of Redux:

• Store: It contains the state of components that can be passed to other components in the application.
• Actions: It basically contains the actions that can be performed on the states present in the store.
• Reducers: These are the pure functions that contain operations that need to be performed on the state.

Syntax:

import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;