Difference between component and container in react redux

Question

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

Answer 1

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 
 My name is {this.name}. I am a doctor { this.type } 
  }
}

 const connect = InnerComponent => { 

   class A extends Component{
     render() {
        return 
     }
   } 
   A.displayName = `Connect(${InnerComponent.displayName})`
   return A
 }

connect function passes a prop type.

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