значение не обновляется после вызова саги

Я использую react-redux вместе с redux-saga. теперь у меня проблема с тем, что у меня есть Modal, который обновляет несколько значений и несколько раз нажимает на сохранение вызовов саги и отражает обновленное значение на странице. но при нажатии кнопки «Сохранить» значение на странице не обновляется. Мне нужно что-то сделать, чтобы перезагрузить страницу, т.е. обновить, но в идеале мой DOM должен повторно отображать его, не так ли? вот моя сага

import { call, put } from 'redux-saga/effects';
import { update } from '../services/api';
import * as types from '../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
        });
    }
}

вот мой редуктор

case types.UPDATES:
       for(var i = 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

        }

РЕДАКТИРОВАТЬ 1:

вот мой код компонента

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>