Redux reducer doesn't update key - reactjs

Question

Hello I am trying to get the reducer "removePlayer" to update the state it generates to have a selectedPlayerIndex of -1 but I can't seem to get it to work, I've looked for similar questions but couldn't find anything that is informative enough to answer my question.
Here is the code
import * as PlayerActionTypes from '../actiontypes/player';
const initialState = {
players: [{
name: 'Jim Hoskins',
score: 31,
created: '11/8/2016',
updated: '11/9/2016'
},
{
name: 'Andrew Chalkley',
score: 20,
created: '11/9/2016',
updated: '11/10/2016'
},
{
name: 'Alena Holligan',
score: 50,
created: '11/11/2016',
updated: '11/12/2016'
}
],
selectedPlayerIndex: -1
}
export default function Player(state=initialState, action) {
switch(action.type) {
case PlayerActionTypes.REMOVE_PLAYER:
const removePlayerList = [
...state.players.slice(0, action.index),
...state.players.slice(action.index + 1)
];
return {
...state,
players: removePlayerList,
selectedPlayerIndex: -1
}
case PlayerActionTypes.SELECT_PLAYER:
return {
...state,
selectedPlayerIndex: action.index
}
default:
return state;
}
}
here is the top level component
class Scoreboard extends Component {
static propTypes = {
players: PropTypes.array.isRequired,
selectedPlayerIndex: PropTypes.number.isRequired
};
render() {
const { dispatch, players, selectedPlayerIndex } = this.props;
const addPlayer = bindActionCreators(PlayerActionCreators.addPlayer, dispatch);
const removePlayer = bindActionCreators(PlayerActionCreators.removePlayer, dispatch);
const updatePlayerScore = bindActionCreators(PlayerActionCreators.updatePlayerScore, dispatch);
const selectPlayer = bindActionCreators(PlayerActionCreators.selectPlayer, dispatch)
const playerComponents = players.map((player, index) => (
<Player
index={index}
name={player.name}
score={player.score}
key={player.name}
updatePlayerScore={updatePlayerScore}
removePlayer={removePlayer}
selectPlayer={selectPlayer}
/>
));
return (
<div className="scoreboard">
<Header players={players} />
<div className="players">
{ playerComponents }
</div>
<AddPlayerForm addPlayer={addPlayer} />
<div className="player-detail">
<PlayerDetail players={players} selectedPlayerIndex={selectedPlayerIndex} />
</div>
</div>
);
}
}
const mapStateToProps = state => (
{
players: state.players,
selectedPlayerIndex: state.selectedPlayerIndex
}
);
export default connect(mapStateToProps)(Scoreboard);
Here is the component that child component Where remove_player is dispatched
import React, { PropTypes } from 'react';
import Counter from './Counter';
const Player = props => (
<div className="player">
<div className="player-name" onClick={() => props.selectPlayer(props.index)}>
<a className="remove-player"
onClick={() => props.removePlayer(props.index)}>
✖
</a>
{props.name}
</div>
<div className="player-score">
<Counter
index={props.index}
updatePlayerScore={props.updatePlayerScore}
score={props.score}
/>
</div>
</div>
);
I've tried to keep the code to only what I think is necessary, if you need to see other parts of the app just let me know.

Answer 1

It looks like you've got a nested onClick event. When you click on removePlayer it propagates up to the selectPlayer. This is due to event bubbling. You need to stop the event from propagating up to the selectPlayer component.
event.stopPropagation();
You'll need to change the removePlayer onClick function to something like:
function(event) {
props.removePlayer(props.index);
event.stopPropagation();
}
More information on event bubbling and capturing can be found here