Почему отрабатывает это событие?

Question

[Юра Комаров]

Написал код, полностью работает так, как я задумал. Но вот вопрос, не могу понять почему он так работает?
Читать комент в коде.

/* 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;
}

Может вообще нужно по другому делать, а я не знаю ) .

Comments

[Антон Спирин]

Код редьюесра покажите.

Так делать нельзя:

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

Почитайте про иммутабельность

[Юра Комаров]

index.js

import {combineReducers}from 'redux';

import tracks from './tracks';
import playlists from './playlist';
import filterTracks from './filterTracks';

export default combineReducers({
	tracks,
	playlists,
	filterTracks,
});

track.js

const initialState = [];

export default function playList(state = initialState, action){
	if (action.type === 'ADD_TRACK'){
		// console.log('add_track');
		return [
			...state,
			action.payload,
		];
	}else if (action.type === 'DELETE_TRACK'){
		return state.filter(obj => obj.id !== action.payload);
	}else if (action.type === 'CANGE_TRACK'){
		return state;
	}
	return state;
}

Answer 1

[Антон Спирин]

Вы передаете в store.dispatch действие:
{type: 'CANGE_TRACK', tracks}
А store по нему не обновляется, так как вы просто прокидываете предыдущее состояние:

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

Вызов:
this.setState({});
инициирует обновление компонента и изменения видно только потому, что вы мутируете props:

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

что неправильно.

Исправить можно так:

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

Но вам обязательно надо исправить то место, где вы мутируете props.

Comments

[Юра Комаров]

Исправил на

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,
	];
}

Все работает (спасибо)
newState что бы не добавлять старый трек , а добавить только новый

[Антон Спирин]

Юра Комаров, ох об этом и не подумал.)