What is the difference between Component and Container in Redux ?

Redux is a state management library for JavaScript applications that helps to store and manage the state of an application in a single store, making it easier to maintain and update the state as the application grows. In this article, we will learn about Component & Container in Redux, along with discussing the significant distinction that differentiates Component from Container.

Component: A Component in Redux refers to a presentational component that is responsible for rendering the UI based on the state and props passed to it. It is considered a “dumb” component as it does not handle any logic or state updates.

Syntax: 

import React from 'react';

const Component = ({ state, props }) => {
    return (
        <div>
            <p>{state.value}</p>
        </div>
    );
};

export default Component;

Advantages:

• Easy to write and understand.
• Reusable.
• Can be tested independently.

Disadvantages:

• No access to the Redux store.
• Limited ability to perform logic or updates to the state.

Example: This component takes an array of users as a prop and renders a list of users.

Javascript

//App.js

import "./App.css";
import React, { useState } from 'react';
import UserList from './UserList';

const App = () => {
    const [users, setUsers] = useState([
        { id: 1, name: 'Dhruv Rawat' },
        { id: 2, name: 'Vinoba Bhave' },
        { id: 3, name: 'Medha Patkar.' },
    ]);

    return (
        <div>
            <h1>User List</h1>
            <UserList users={users} />
        </div>
    );
};

export default App;

Javascript

//UserList.js

import React from 'react';

const UserList = ({ users }) => (
    <ul>
        {users.map(user => (
            <li key={user.id}>{user.name}</li>
        ))}
    </ul>
);

export default UserList;

Output:

Container: A Container in Redux refers to a component that is connected to the Redux store and is responsible for dispatching actions and updating the state. It is considered a “smart” component as it handles the logic and state updates.

Syntax:

import { connect } from 'react-redux';
import Component from './Component';

function mapStateToProps(state) {
    return {
        data: state.data
    };
}

export default connect(mapStateToProps)(Component);

Advantages:

• Access to the Redux store and dispatch function
• Ability to perform logic and updates to the state

Disadvantages:

• More complex to write and understand
• Not reusable

Example: This container uses the connect function from the react-redux library to connect to the Redux store. The mapStateToProps function is used to specify which parts of the state should be passed down as props to the component. In this example, the entire user’s state is passed down.

Javascript

//App.js

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import ConnectedUserList from './ConnectedUserList';

const App = () => (
    <Provider store={store}>
        <ConnectedUserList />
    </Provider>
);

export default App;

Javascript

//store.js

import { createStore } from 'redux';

const initialState = {
    users: [
        { id: 1, name: 'Ridhiya Negi' },
        { id: 2, name: 'Geet Negi' },
    ],
};

const rootReducer = (state = initialState, action) => state;

export default createStore(rootReducer);

Javascript

//ConnectedUserList.js

import { connect } from 'react-redux';
import UserList from './UserList';

const mapStateToProps = state => ({
    users: state.users,
});

export default connect(mapStateToProps)(UserList);

Javascript

//UserList.js

import React from 'react';

const UserList = ({ users }) => (
    <ul>
        {users.map(user => (
            <li key={user.id}>{user.name}</li>
        ))}
    </ul>
);

export default UserList;

Output:

Difference between Component and Container:

Component	Container
Renders UI based on state and props.	Dispatches actions and updates state.
“Dumb” component.	“Smart” component.
Easy to write and understand.	More complex to write and understand.
Reusable	Not reusable
No access to the Redux store.	Access to the Redux store and dispatch function.
Can be tested independently.	Cannot be tested independently.
Focuses on presentation.	Focuses on data management.

Summary: The main difference between a Component and a Container in Redux is that Components are responsible for rendering the UI, while Containers are responsible for connecting the application state to the components and updating the state. Components are simple, reusable, and easy to write, while Containers are more complex and handle the logic and state updates. It is generally recommended to keep the components simple and separate the logic and state management to the Containers. This approach makes the code easier to maintain, test, and debug.