Difference between component and container in react redux

What is the difference between component and container in react redux?

Component is part of the React API. A Component is a class or function that describes part of a React UI.

Container is an informal term for a React component that is connect-ed to a redux store. Containers receive Redux state updates and dispatch actions, and they usually don't render DOM elements; they delegate rendering to presentational child components.

For more detail read presentational vs container components by Dan Abramov.

Components

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. They are sometimes called "presentational components" and the main concern is how things look

Containers

Containers are just like components without UI and Containers are concerned with how things work.. It mainly talks to the redux store for getting and updating the data

see the table comparison from Redux doc

Detailed explanation https://redux.js.org/basics/usage-with-react#presentational-and-container-components

Component which is responsible for fetching data and displaying is called smart or container components. Data can be come from redux, any network call or third party subscription.

Dumb/presentational components are those which are responsible for presenting view based on props received.

Good article with example here

https://www.cronj.com/blog/difference-container-component-react-js/

The components construct a piace of the view, so it should render DOM elements, put content on the screen.

The containers participate in the data elaboration, so it should "talk" with redux, because it will need to modify the state. So, you should include connect (react-redux) what it makes the connection, and the functions mapStateToProps and mapDispatchToProps :

.
.
.
import { connect } from "react-redux";

class myContainer extends Component {
}

function mapStateToProps(state) {
  // You return what it will show up as props of myContainer
  return {
    property: this.state.property
  };
}

function mapDispatchToProps(dispatch) {
  // Whenever property is called, it should be passed to all reducers
  return bindActionCreators({ property: property }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(myContainer);

React has two main components first is smart component(containers) and second is dumb(presentation component). Containers are very similar to components, the only difference is that containers are aware of application state. If part of your webpage is only used for displaying data (dumb) then make it a component. If you need it to be smart and aware of the state (whenever data changes) in the application then make it a container.

They're both components; containers are functional, so they do not render any html on their own, and then you also have presentational components, where you write the actual html. The purpose of the container is to map the state and dispatch to props for the presentational component.

Further reading: Link

React, Redux are independent libraries.

React provides you with a framework for creating HTML documents. Components are in a way representing a particular part of the document. Methods associated with a component can then manipulated the very particular part of the document.

Redux is a framework which prescribes to a specific philosphy for storing and managing data in JS environments. It a one big JS object with certain methods defined, best use case comes in the form of state management of a web app.

Since React prescribes that all the data should flow down from root to leaves, it becomes tedious to main all the props, defining props in components and then passing props to certain props to children. It also makes the entire application state vulnerable.

React Redux offers a clean solution, where it directly connects you to the Redux store, by simply wrapping the connected component around another React Component( your Container). Since in your implementaion, your implementation you already defined which piece of the entire application state you require. So connect takes that data out of store and passes it as props to the component it wrapping itself arround.

Consider this simple example:

 class Person extends Component {
  constructor(props){
   this.name = this.props.name;
   this.type = this.props.type;
  }

  render() {
     return <p> My name is {this.name}. I am a doctor { this.type } </p>
  }
}

 const connect = InnerComponent => { 
    
   class A extends Component{
     render() {
        return <InnerComponent {...this.props} type="Doctor"/>
     }
   } 
   A.displayName = `Connect(${InnerComponent.displayName})`
   return A
 }

connect function passes a prop type.

This way a connect acts as container for the Person component.