javascript - redux-form - Calculate a field value using other 2 fields values using onChange -

the scene:

think 3 fields: quantity, singleprice, totalprice. need them fields in form totalprice has re-calculated every time change quantity or singleprice simple operation can imagine..

what did:

• created function triggered onchange event of quantity field , 1 singleprice field.

• the above function calls redux action payload this:

  { name: name_of_the_updated_field, value: new_field_value }

• that action picked formreducer plugin makes calculations , return updated value object.

the problem: redux store not updated nor form is.

my form reducer (the property have update inside property).

import { reducer formreducer } 'redux-form';  export default formreducer.plugin({   formname: (state, action) => {     switch (action.type) {       case 'calc_total_price':         return {           ...state,           values: {             ...state.values,             competences: state.values.competences.map((c, i) => {               if (i === action.payload.index) {                 const { name, value } = action.payload;                 const next = object.assign({}, c);                 next[name] = value;                 next.totalprice = next.quantity * next.singleprice                 return next;               }               return c;             }),           },         };       default:         return state;     }   }, }); 

am missing something? how fix this? simpler way have result?

any appreciated!

you might think use formvalueselector present input value , calculate total like-

import react, { proptypes } 'react'; import { field, reduxform, formvalueselector, fieldarray, submissionerror } 'redux-form'; import { connect } 'react-redux';  class newsaleform extends react.component {     componentwillreceiveprops(nextprops) {       if (nextprops.items && nextprops.items.length > 0) {          nextprops.items.foreach((item) => {             if (item.price && item.unit) {                if (item.unit_discount) {                   item.total = (item.price - item.unit_discount) * item.unit;                } else {                   item.total = item.price * item.unit;                }             } else {                item.total = '';             }          });       }    }  render() {    ...... }   newsaleform = reduxform({ // eslint-disable-line    form: 'newsaleform' })(newsaleform);  const selector = formvalueselector('newsaleform');  newsaleform = connect(state => { // eslint-disable-line    const items = selector(state, 'items');    return {       items,    }; })(newsaleform);  export default newsaleform;