reactjs - value not being updated after saga call react-redux -
i using react-redux along redux-saga. have problem have modal updates multiple value , click on save saga calls multiple times , reflects updated value on page. on clicking of save not updating value on page.i need make reload page i.e refresh ideally dom should re render it,shouldn't it? here saga
import { call, put } 'redux-saga/effects'; import { update } '../services/api'; import * types '../constants/actiontypes'; export default function* updatesaga({ value }) { try { const updatedata = yield value.map(data =>{ return (call(update,data))} ) yield [ put({ type: types.updates, updatedata: updatedata }) ] } catch (error) { console.log("porfilingerror",error); yield put({ type: 'fetch_update_error', error }); } }
here's reducer
case types.updates: for(var = 0;i<highestdata.channel_mix.length;i++){ for(var j= 0;j<action.updatedata.length;j++){ if(highestdata.mix[i].pk === action.updatedata[j].pk){ highestdata.mix[i].volume = action.updatedata[j].volume; break; } } } dashboard_data[0].mix = highestdata.mix; return {...state, highestprofiledata:highestdata, program_data: dashboard_data }
edit 1:
here component code
console.log("rendering....") return ( <div id="otherprogram"> <div classname="panel panel-default"> <div classname="panel-heading panel-head"> <h3 classname="panel-title">other details</h3> <button onclick={() => this.setstate({ open: !this.state.open })} > <glyphicon glyph={ this.state.open ? 'glyphicon glyphicon-minus' : 'glyphicon glyphicon-plus' } /> </button> </div> <collapse in={this.state.open}> <well> <div classname="row other_pgm_data"> <div classname="col-md-4"> <h5> mix</h5> <div classname="other_data_mix"> <table classname="table table-bordered"> <thead> <th /> <th> {this.props.data.year .tostring() .substr(0, 4)}{' '} mix </th> <th> vol. growth </th> <th> volume </th> </thead> <tbody> {this.props.profiledata.mix.map(data => <tr> <td> {data.name} </td> <td> {' '}{math.round(data.volume * 100)}%{' '} </td> <td> {data.volume_growth}%</td> </tr> )} </tbody> </table> </div>
it looks mutating highestdata
instead of creating new one
not sure structure have atleast should rewritten
for(var = 0;i<highestdata.channel_mix.length;i++){ for(var j= 0;j<action.updatedata.length;j++){ if(highestdata.mix[i].pk === action.updatedata[j].pk){ highestdata.mix[i].volume = action.updatedata[j].volume; break; } } }
to this
highestdata = { ...highestdata , mix: highestdat.mix.map(channel => { const update = action.updatedata.find(({pk}) => channel.pk === pk) if(update) return {...channel, volume: update.volume} return channel }) }
Comments
Post a Comment