javascript - Redux not re-rendering React component after store update -

i've trawled net , stackoverflow answers no luck, so...

my reducer:

import { combinereducers } 'redux' import { update_calories } './actions'  const calories = (state = 0, action) => {     switch (action.type) {         case update_calories:          //return object.assign({}, state, {calories: action.calories});          /*return {             ...state,             calories: action.calories         }*/          return action.calories     default:         return state     } }  const fitnessapp = combinereducers({     calories })  export default fitnessapp 

my actions:

export const update_calories = 'update_calories';  export const updatecalories = (calories) => {     return {         type: 'update_calories',         calories     } } 

i calling store.dispatch(updatecalories(totalcalories)); 1 component seems update store - see below console.log

getstate object {calories: 1357}

and component should updating:

class dial extends component {     // constructor code     // lifecycle hooks     // functions etc      render(){         console.log('this.props - render', this.props)         return (             <div id="calories">                 <h1>today's calories</h1>                  <calories data={{id : 'current-consumed', datatotalcals :this.props.datatotalcals, consumed : this.props.datacurrentconsumed, innerradius : 90, outerradius : 105, bgcolour: '#7cbdd7', fgcolour : '#ffffff', circ : this.circ}} />                 <calories data={{id : 'excess-consumed', datatotalcals :this.props.datatotalcals, consumed : this.props.dataexcessconsumed, innerradius : 75, outerradius : 90, bgcolour: '#7cbdd7', fgcolour : '#ce392b', circ : this.circ}}/>                 <text id="daily-permitted-text">daily calorie intake</text>                 <input type="text" ref="dailypermitted" id="daily-permitted"                    onchange={this.debounce(this.rerenderdailypermitted, 800)}                    defaultvalue="" />                 <legend datacurrentconsumed={this.props.datacurrentconsumed}                     datacaloriesburned={this.props.datacaloriesburned}                     dataexcessconsumed={this.props.dataexcessconsumed} />             </div>         );     } }  const mapstatetoprops = state => {     console.log('state.calories', state.calories)     return {         datatotalcals: 2250,         datacurrentconsumed: state.calories,         dataexcessconsumed: 0     } }  export default connect(mapstatetoprops)(dial) 

i've been smacking head against wall hours trying figure out why component isn't re-rendering.

from can see state returned reducer has not been mutated apparently main reason components not rerendering.

maybe problem me not understanding how component rerendered mapstatetoprops, code seems there.

any appreciated.