Be the first user to complete this post

  • 0
Add to List

Generating container components with connect utility in react redux app

Presentational component specifies look of the component where as Container component specifies how the behavior of it. I would recommend reading Presentation vs container components. In well architected react-redux app, Container components have two major responsibilities:

  1. Re-render the presentational component when store updates
  2. Define the behavior of presentational components by passing the necessary data and dispatch callbacks to update the store

Generating containers component without connect from react-redux

[wpgist id="dcb86657def2bd9390a170b8a4f17092" file="container-component-without-connect.js"]

Generating containers component with connect from react-redux

  • In this approach, the container components do not need to access the redux store via context. Hence, they do not need to specify the contextType explicitly.
[wpgist id="dcb86657def2bd9390a170b8a4f17092" file="container-component-with-connect.js"]



Also Read:

  1. Disable eslint no-unused-vars warning on global functions
  2. Use node in es6 syntax with babel transpiling
  3. Execution sequence of a React component's lifecycle methods
  4. Pure vs Impure functions
  5. Pass down props using React childContextTypes in a deeply nested component tree
  6. exports is not defined
  7. Automating Store and Action registration for multiple components using Fluxxor
  8. Create Reducer for Redux Applications