How to render a reactjs component stored in a redux reducer? -

i have redux reducer loaded several reactjs components.

i want load these inside other components through this.props

like: this.props.components.myreactcomponent

class othercomponent extends component {   render() {     const component = this.props.components.myreactcomponent     return (       <div>         <component />       </div>     )   } } 

is possible? if so, how?

edit component connected component. able load broken. in case, counter, when click increment or decrement nothing happens. in console, there error:

uncaught referenceerror: _classcallcheck not defined 

if convert component dumb component (without connecting it), error this:

uncaught referenceerror: _classcallcheck3 not defined 

edit 2

i found out why errors show up. because react component gets stripped out when stored in reducer:

a react component this:

{ function:    { [function: connect]      displayname: 'connect(counter)',      wrappedcomponent: { [function: counter] proptypes: [object] },      contexttypes: { store: [object] },      proptypes: { store: [object] } } } 

however, after store inside reducer, loses properties , ends looking this:

{ function:    { [function: connect] } } 

after reading comments below, thought of alternative. can store in reducer path each component, make new wrapper component render other components paths.

i tried encoutered different problem funcion require nodejs weird reason not letting me user variable argument. example:

this works:

var somecontent = require('../extensions/mycontent/containers') 

this not:

var testpath = '../extensions/mycontent/containers' var somecontent = require(testpath) 

giving me following error:

uncaught error: cannot find module '../extensions/mycontent/containers'. 

it adding period @ end of path. how can prevent require add period?

if can think of other alternative can implement trying do, appreciate it.

edit 3 following thomas advice...

what trying accomplish this:

i want able render react components inside other react components, know how same way know how to; however, want able importing file contain components without having import , export each 1 of them:

othercomponent.js

import react, { component } 'react' import { somecomponent } '../allcomponentes/index.js'  export default class othercomponent extends component {   render() {     return (       <somecomponent />     )   } } 

somecomponent.js

import react, { component } 'react'  export default class somecomponent extends component {   render() {     return (       <div>         hello       </div>     )   } } 

allcomponents/index.js

import somecomponent '../allcomponents/somecomponent/index.js'  export { somecomponent } 

what trying in allcomponents/index.js avoid having import/export statements each component reading (with fs module) components inside allcomponents folder , export them.

allcomponents/index.js (pseudocode)

get folders inside allcomponents folder   loop through each folder , require components     store each component inside object  export object 

when tried that, encountered multiple issues, one, export statements have in top-level, , second, fs work on server side.

so, why thought of loading components in reducer , pass them props. found out, got stripped out when stored them in reducer.

then, thought of storing path components inside reducer , have wrapper component use path require needed component. method worked out nodejs function require wont allow me pass variable argument (as shown in edit 2)

i think question not redux rather (as say):

what trying in allcomponents/index.js avoid having import/export statements each component reading (with fs module) components inside allcomponents folder , export them. 

by way of example, have of (dumb) form components in folder path components/form-components , index.js looks like:

export fieldset './fieldset' export input './input' export label './label' export submit './submit' export select './select' export textarea './textarea' 

then when want import component elsewhere, import { fieldset, label, input, submit } '../../components/form-components/';