javascript - How to render a component to prop with React/Redux (The right way)? -

i have modal component popup window. need set different components bodycontainer.

<modal     show={this.props.first.showmodal}     size={this.props.first.sizemodal}     bodycontainer={this.props.first.modalbodycontainer}     /* bodycontainer={<mail {...this.props}/>} */     onclose={this.props.firstactions.onclosemodalhome} /> 

as understand redux philosophy can this

// search patient actions export const onsearchpatient = (ur, token) => dispatch => (   calltoapiwithtoken(`patient/by/ur/${ur}`, token)     .then(response =>       ((response.data === null) ? dispatch(onsearchpatientnotfound(ur)) : dispatch(onsearchpatientfound(response.data))),     )     .catch(error => ({ type: psactions.on_submit_error })) );  export const onsearchpatientfound = createaction(psactions.on_search_patient_found);// data export const onsearchpatientnotfound = createaction(psactions.on_search_patient_not_found);  //reducer  case psactions.on_search_patient_found:   return {     ...state,     showmodal: true,     modalbodycontainer: <patientdetails {...action.payload} />,   };  case psactions.on_search_patient_not_found:   return {     ...state,     error: true,     errormsg: <div>the patient <strong>{action.payload}</strong> not in system</div>,   }; 

but colleague arguing bad practice. i'm talking

modalbodycontainer: <patientdetails {...action.payload} /> 

it possible relocate render logic modal in case need create switch possible components.

what right way this?

edited have 2 ideas how this. best use?

//action export const setmodalbody = createaction(psactions.set_modal_body);//component  //reducer  case psactions.set_modal_body:   return {     ...state,     showmodal: true,     modalbodycontainer: action.payload />,   }; //usage onclick={() => searchpatient.length > 0 && onsearch(searchpatient, token).then(patientfound && setmodalbody(<patient {...props} />) 

or

const modal = ({...}) => ( {{ //something //switch based on prop.bodycomponenttype //in case need import possible components modal     sectiona: (       <sectionacomponent />     ),     sectionb: (       <sectionbcomponent />     ),     sectionc: (       <sectionccomponent />     )   }[section]} ) 

edited 2 not redux actions, it's component rendering inside hoc related actions.

your coworker right.

the philosophy of redux/react largely around separation of concerns , making things loosely coupled highly cohesive. situation, means action should not know component cause render (loosely coupled), complete definition of result of api call (highly cohesive).

i have both of reducer functions modify the same attribute of redux state. afterall, represent same piece of data, different values. 1 represents success, , other failure. have them both modify patientfoundstatus , provide value (perhaps using http codes, or success/failure constant defined elsewhere). use value determine output of modal.

so why better?

well couple of reasons. important consider how code need modified if, later on, action needed produce different (additional) result in view. let's used pre-populate form patient's information. how code need change?

given code have above, need entirely rewritten or duplicated. modal body components irrelevant new feature, , "success/failure" information (and patient information) needed need added.

but consider if these actions returned data relevant view. now, data you. reducers , actions remain entirely unchanged, , merely use pre-existing slice of state impact new section of app.

that's 1 of biggest advantages react/redux when used correctly. on time, end creating flexible toolbox makes adding new features trivial, because plumbing in place , wholly distinct how utilized. low coupling. high cohesion.