Why does this event work?

Question

React

Wrote the code, completely works as I intended. But the question is, I can not understand why it works like this?
Read comments in code.

/* global $ */
import React, {Component}from 'react';
import PropTypes from 'prop-types';
import {connect}from 'react-redux';

class App extends Component {
  static PropTypes = {
    tracks: PropTypes.array.isRequired,
    onAddTrack: PropTypes.func,
    onFindTrack: PropTypes.func,
    onDeleteTreck: PropTypes.func,
  };

  constructor() {
    super();
    this.state = {track: {id: '', name: ''}};
  }

  addTrack() {
    const props = this.props;
    props.onAddTrack(this.trackInput.value);
    this.trackInput.value = '';
  }

  findTrack() {
    const props = this.props;
    props.onFindTrack(this.searchInput.value);
  }

  deleteTreck(id) {
    const props = this.props;
    props.onDeleteTreck(id);
  }

  openPopup(track) {
    const inst = $('[data-remodal-id=modal]').remodal();
    inst.open();
    this.setState({track: {id: track.id, name: track.name}});
  }

  handleChange(event) {
    const track = this.state.track;
    this.setState({track: {id: track.id, name: event.target.value}});
  }

  saveNewTrackName() {
    const props = this.props;
    const track = this.state.track;
    props.tracks.forEach(obj => {
      if (obj.id === track.id){
        obj.name = track.name;
      }
    });
    props.onChangeTrack(props.tracks);
    this.setState({});               если удалить эту строку то при закрытие popup'a в
                                               (при этом происходит сохранение нового названия в стор )
                                             в  сторе значение меняется а на странице нет .
                                              Получился какой-то костыль мне кажется, 
                                              a c этой строкой работает все хорошо 
  }

  render() {
    const props = this.props;
    console.log('props ', props);
    return (
      <div className='container'>
        <div>
          <input ref={input => {this.trackInput = input;}} type='text' />
          <button onClick={this.addTrack.bind(this)}>Add Track</button>
        </div>
        <div>
          <input ref={input => {this.searchInput = input;}} type='text' />
          <button onClick={this.findTrack.bind(this)}>Find Track</button>
        </div>
        <ul>
          {
            props.tracks.map((track, index) =>
              (
                <li key={index}>
                  {track.name}
                  <span className='delete-button' onClick={() => this.deleteTreck(track.id)} > <button>X</button></span>
                  <button onClick={() => this.openPopup(track)} >редактировать</button>

                </li>
              )
            )
          }
        </ul>
        <div
          className='remodal'
          data-remodal-id='modal'
          data-remodal-options='hashTracking: false'
        >
          <button className='remodal-close' data-remodal-action='close' >X</button>
          <p>Отредактируй и сохрани</p>
          <input
            onChange={e => {this.handleChange(e);}}
            type='text'
            value={this.state.track.name}
          />
          <button
            className='remodal-confirm'
            data-remodal-action='confirm'
            onClick={this.saveNewTrackName.bind(this)}
          >OK</button>
        </div>
      </div>
    );
  }

}

export default connect(
  state => ({
    tracks: state.tracks.filter(track => track.name.includes(state.filterTracks)),
  }),
  dispatch => ({
    onAddTrack: name => {
      const payload = {
        id: Date.now().toString(),
        name,
      };
      dispatch({type: 'ADD_TRACK', payload});
    },
    onDeleteTreck: trackId => {
      dispatch({type: 'DELETE_TRACK', payload: trackId});
    },
    onFindTrack: name => {
      dispatch({type: 'FIND_TRACK', payload: name});
    },
    onChangeTrack: tracks => {
      dispatch({type: 'CANGE_TRACK', tracks});
    },
  }),
)(App);

кусочек кода из стора
}else if (action.type === 'CANGE_TRACK'){
  return state;
}

Maybe you need to do it differently, but I don’t know).

Answer 1

You pass an action to store.dispatch : And the store is not updated on it, since you simply roll over the previous state:

} else if (action.type === 'CANGE_TRACK'){
  return state;
}

Calling:
will update the component and the changes are only visible because you are mutating the props:

props.tracks.forEach(obj => {
  if (obj.id === track.id){
    obj.name = track.name;
  }
});

what is wrong.
You can fix it like this:

} else if (action.type === 'CANGE_TRACK'){
    return [
      ...state,
      action.payload,
    ];
}

But you definitely need to fix the place where you are mutating props.