76157

Redux higher order components same as container components

Question:

I'm trying to wrap my head around higher order components, are these the same as Redux container components. Plus what is the recommended way to write higher order components (container components) is it through a class that extends React.Component or without one as given in the redux site.

Answer1:

There's <a href="https://www.google.com/?q=react%20hoc#q=react%20high%20order%20components" rel="nofollow">so much</a> written on the subject, so I'll just try to briefly explain the concept and how it is related to Redux.

You could think of HOC as an enhancer (or "decorator"). It takes an existing component and returns a new, improved one. Common tasks would be: injecting props, composing, changing the way it renders etc.

It is typically implemented as a function: getting one component, producing another. The pattern may vary depends on your goal and needs.

You could extend the wrapped component:

function hoc(WrappedComponent) { return class HOC extends WrappedComponent { render() { return super.render(); } } }

or compose the wrapped component:

function hoc(WrappedComponent) { return class HOC extends React.Component { render() { return (<WrappedComponent {...this.props} extraProp={1} />) } } }

and if you want to keep things simple and don't require the full life-cycle, you could also use a stateless component:

function hoc(WrappedComponent) { return (props) => (<WrappedComponent {...props} extraProp={1} />); }

I suggest reading <a href="https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#.htxbhjs1y" rel="nofollow">this</a> for a deeper understanding.

<hr />

Now, this concept is not coupled with Redux, but Redux <strong>does</strong> use it.<br /><a href="https://github.com/reactjs/react-redux/blob/master/src/components/connectAdvanced.js" rel="nofollow">connect()</a> is actually a HOC that does the wiring between the wrapped component and the store (injects props and responsible for re-rendering). It takes your presentational component and returns a connected component.<br /> Container ("connected") components are in fact <em>enhanced components</em>.

So to make it clear: Post is a component, we use the HOC connect() to create the enhanced component PostContainer.

Recommend

  • why some imports cannot be resolved?
  • Runtime exception - Datanucleus enhancer
  • React Functional Components with hooks vs Class Components
  • Can a team admin create a distribution provisioning profile? Or just the team agent?
  • Django XFrameOptionsMiddleware (X-Frame-Options) - allow iframe by client IP
  • Suggest design pattern for an application having different user roles
  • Django - Correct way to pass arguments to CBV decorators?
  • Is there a better way of designing zend_forms rather than using decorators?
  • Permissions error when using cli in Jboss wildfly and docker
  • Can we automatically derive a user-defined trait? [duplicate]
  • SugarORM query from multiple tables?
  • Python script in a browser
  • Why use CDN(Content Delivery Network‎)? [duplicate]
  • Grails - Class “org.grails.tomcat.TomcatLoader” was not found in the CLASSPATH
  • Integrating in Python using Sympy
  • python, confused in decorate and closure
  • applying background to first, and every third row in a dynamically generated table
  • Solving multiple interface implementation
  • Multiple versions of iTunesArtwork in one project?
  • Less Conflicting Session Manager for Zope 2
  • apply a javascript function to draggable copy
  • Android changing fragment order inside FragmentPagerAdapter
  • SAVE attribute needed for Fortran variables when only the C_LOC address is returned to a C program?
  • Why cepheus don't send int without quotes to orion?
  • Does Mobilefirst provide a provision to access web services directly?
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Create DicomImage from scratch using Dcmtk
  • Groovy: Unexpected token “:”
  • How to use remove-erase idiom for removing empty vectors in a vector?
  • Typescript - Unable to get 'import' statement to function
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • Installing Hadoop, Java Exception about illegal characters at index 7?
  • Different response to non-authenticated users and AJAX calls
  • Updating server-side rendering client-side
  • Fill an image in a square container while keeping aspect ratio
  • Rearranging Cells in UITableView Bug & Saving Changes
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • how does django model after text[] in postgresql [duplicate]
  • Cant find why the layout is getting smaller
  • Reading document lines to the user (python)