Connect React and Redux

November 17, 2022

Connect React and Redux

React Redux is a way to manage the “state” and/or we can say it is a cache or storage that can be accessed by all react components with a structured way. It has to be accessed through a react “Reducer” and “Actions”.

What is Redux connect()?

The React Redux package provides React bindings for the react Redux state container, and making it very easy to connect a React application to a Redux store. This allows us to separate our React application components as presentational and container components based on their connection to the Redux store.

Presentational React components is only concerned with how things look, and they are not aware of the React Redux state. Presentational React components get their data from props(properties) and may trigger callbacks passed to them through props. On the other hand, react container components is responsible for how things work and are fully aware of the ract Redux state. They are often created using React Redux and more dispatch Redux actions. They also subscribe to changes in the react Redux state.

The connect() function connects a React components to a Redux store.

It provides its connected components with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the redux store.

It does not modify the components class passed to it, and instead, it returns a new, connected components class that wraps the components you passed in.

How to connect an app to the Redux store

The React Redux packages exposes a very simple interface. You only need to concern yourself with 2 components. For one, the <Provider store> wraps the React application and makes the react Redux state available to all react container components in the application’s hierarchy. On the other hand, connect([mapStateToProps], [mapDispatchToProps], [mergeProps], and [options]) creates a higher order component(HOC) for making container components out of base React components.

Firstly we can install the react redux packages in the application

npm install react-redux --save

If you already have a react Redux store set up for your React application, you can connect the app to the react Redux store with the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import createStore from './createReduxStore';
const store = createStore();
const rootElement = document.getElementById('root');
ReactDOM.render((
 <Provider store={store}>
  <AppRootComponent />
 </Provider>
), rootElement);

With this code setup, we can now create react container components that are connected to the react Redux store within the hierarchy of the AppRootComponent using the connect() API.

The React Redux connect() API(Application Programming Interface) is used for creating react container elements that are connected to the react Redux store. The react Redux store is derived from the top most ancestor of the component using React Context. If you are only creating a presentational component, you do not need for connect().

Whether you want to get data from the react Redux store, and dispatch actions on the react Redux store, or do both in your React components, you can make the components a container components by wrapping it in a higher order component (HOC) returned by connect():

import React from 'react';
import { connect } from 'react-redux';
import Profile from './components/Profile';
function ProfileContainer(props) {
  return (
    props.loggedIn
      ? <Profile profile={props.profile} />
      : <div>Please login to view profile.</div>
  )
}
const mapStateToProps = function(state) {
  return {
    profile: state.user.profile,
    loggedIn: state.auth.loggedIn
  }
}
export default connect(mapStateToProps)(ProfileContainer);