Why work out it?

Wrote the code fully works as I planned. But the question is, can't understand why it works?
Read the comments in the 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 === a track.id){
 obj.name = track.name;
}
});
props.onChangeTrack(props.tracks);
 this.setState({}); if you remove this line when closing popup'a
 (this saves the new titles in store )
 to store value changes and the page no .
 The result was a spike I think 
 a c this line everything works well 
}

 render() {
 const props = this.props;
 console.log('props ', props);
 return (
 <div classname="container">
the <div>
 <input ref="{input" => {this.trackInput = input;}} type='text' />
 <button onclick="{this.addTrack.bind(this)}">Add Track</button>
</div>
the <div>
 <input ref="{input" => {this.searchInput = input;}} type='text' />
 <button onclick="{this.findTrack.bind(this)}">Find Track</button>
</div>
the <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)} >edit</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>Edit and save</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);

a piece of code from Stora
}else if (action.type === 'CANGE_TRACK'){
 return state;
}

May even need another to do, and I don't know ) .
June 3rd 19 at 19:36
1 answer
June 3rd 19 at 19:38
Solution
You pass in the store.dispatch action:
{type: 'CANGE_TRACK', tracks}
And store it not updated, as you just prokidyvaya previous state:
} else if (action.type === 'CANGE_TRACK'){
 return state;
}

Call:
this.setState({});
initiates component update and changes can be seen only because you muterule props:
props.tracks.forEach(obj => {
 if (obj.id === a track.id){
 obj.name = track.name;
}
});

what is wrong.

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

But you should definitely fix the place where you muterule props.
Fixed
saveNewTrackName() {
 const props = this.props;
 const track = this.state.track;
props.onChangeTrack(track);
}

}else if (action.type === 'CHANGE_TRACK'){
 const newState = state.filter(obj => obj.id !== action.track.id);
 return [
...newState,
action.track
];
}

Everything works (thank you)
newState that would not add star trek , and only add new - Candace.Shiel commented on June 3rd 19 at 19:41
Oh about this and didn't think.) - Lenny.Botsfo commented on June 3rd 19 at 19:44

Find more questions by tags React