title: How to render a reactjs component stored in a redux reducer?
body: <p>I have a redux reducer loaded with several reactjs components.</p>
  
  <p>I want to load these inside other components through <code>this.props</code></p>
  
  <p>Like: <code>this.props.components.MyReactComponent</code></p>
  
  <pre><code>class OtherComponent extends Component {
    render() {
      const Component = this.props.components.MyReactComponent
      return (
        &lt;div&gt;
          &lt;Component /&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Is this possible? If so, how?</p>
  
  <p><strong>EDIT</strong> The component is a connected component. I am able to load it but it is broken. In this case, it is a counter, when you click to increment or decrement nothing happens. In the console, there is this error:</p>
  
  <pre><code>Uncaught ReferenceError: _classCallCheck is not defined
  </code></pre>
  
  <p>if I convert the component into a dumb component (without connecting it), the error is this:</p>
  
  <pre><code>Uncaught ReferenceError: _classCallCheck3 is not defined
  </code></pre>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>I found out why those errors show up. It is because the react component gets stripped out when stored in the reducer:</p>
  
  <p>A react component would look something like this:</p>
  
  <pre><code>{ function:
     { [Function: Connect]
       displayName: 'Connect(Counter)',
       WrappedComponent: { [Function: Counter] propTypes: [Object] },
       contextTypes: { store: [Object] },
       propTypes: { store: [Object] } } }
  </code></pre>
  
  <p>However, after I store it inside a reducer, it loses its properties and ends up looking something like this:</p>
  
  <pre><code>{ function:
     { [Function: Connect] } }
  </code></pre>
  
  <p>After reading the comments below, I thought of an alternative. I can store in a reducer the path to each component, then make a new wrapper component that could render those other components from those paths.</p>
  
  <p>I tried it but encoutered a different problem with the funcion <code>require</code> from nodejs that for some weird reason is not letting me user a variable as an argument. For example:</p>
  
  <p>This works:</p>
  
  <pre><code>var SomeContent = require('../extensions/myContent/containers')
  </code></pre>
  
  <p>This does not:</p>
  
  <pre><code>var testpath = '../extensions/myContent/containers'
  var SomeContent = require(testpath)
  </code></pre>
  
  <p>Giving me the following error:</p>
  
  <pre><code>Uncaught Error: Cannot find module '../extensions/myContent/containers'.
  </code></pre>
  
  <p>It is adding a period at the end of the path. How can I prevent <code>require</code> to add that period?</p>
  
  <p>If you can think of any other alternative I can implement for what I am trying to do, I would greatly appreciate it.</p>
  
  <p><strong>EDIT 3</strong> Following Thomas advice...</p>
  
  <p>What I am trying to accomplish is this:</p>
  
  <p>I want to be able to render react components inside other react components, I know how to do it the same way most us know how to; however, I want to be able to do it by importing a file that would contain all the components  without actually having to import and export each one of them:</p>
  
  <p>OtherComponent.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import { SomeComponent } from '../allComponentes/index.js'
  
  export default class OtherComponent extends Component {
    render() {
      return (
        &lt;SomeComponent /&gt;
      )
    }
  }
  </code></pre>
  
  <p>SomeComponent.js</p>
  
  <pre><code>import React, { Component } from 'react'
  
  export default class SomeComponent extends Component {
    render() {
      return (
        &lt;div&gt;
          Hello
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>allComponents/index.js</p>
  
  <pre><code>import SomeComponent from '../allComponents/SomeComponent/index.js'
  
  export { SomeComponent }
  </code></pre>
  
  <p>What I am trying to do in <code>allComponents/index.js</code> is to avoid having import/export statements for each component by reading (with <code>fs</code> module) all the components inside the <code>allComponents</code> folder and export them. </p>
  
  <p>allComponents/index.js (pseudocode)</p>
  
  <pre><code>get all folders inside allComponents folder
    loop through each folder and require the components
      store each component inside an object
  
  export object
  </code></pre>
  
  <p>When I tried that, I encountered multiple issues, for one, export statements have to be in the top-level, and second, <code>fs</code> would work only on the server side.</p>
  
  <p>So, that is why I thought of loading all the components in a reducer and then pass them as props. But as I found out, they got stripped out when stored them in a reducer.</p>
  
  <p>Then, I thought of only storing the path to those components inside a reducer and have a wrapper component that would use that path to <code>require</code> the needed component. This method almost worked out but the nodejs function <code>require</code> wont allow me to pass a variable as an argument (as shown in EDIT 2)</p>