Buttons don't work. I get an error saying that "Actions must be plain objects. Use custom middleware for async actions".

import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as PlayerActionCreators from '../actions/player';

import AddPlayerForm from '../components/AddPlayerForm';
import Header from '../components/Header';
import Player from '../components/Player';



class Scoreboard extends Component {

  static propTypes = {
    players: PropTypes.array.isRequired
  };

  render() {

    const {dispatch, players} = this.props;

    const addPlayer = bindActionCreators(PlayerActionCreators.addPlayer, dispatch);
    const removePlayer = (PlayerActionCreators.removePlayer, dispatch);
    const updatePlayerScore = (PlayerActionCreators.updatePlayerScore, dispatch);

    const playerComponents = players.map((player, index) => (
      <Player 
        index={index}
        name={player.name}
        score={player.score}
        key={player.name}
        updatePlayerScore={updatePlayerScore}
        removePlayer={removePlayer}
      />
    ));

    return (
      <div className="scoreboard">
        <Header players={players} />
        <div className="players">
          { playerComponents }
        </div>
        <AddPlayerForm addPlayer={addPlayer} />
      </div>
    );
  }
}

const mapStateToProps = state => (
  {
    players: state
  }
);


export default connect(mapStateToProps)(Scoreboard);
//Scoreboard is the container we want to connect to redux

export const ADD_PLAYER = 'player/ADD_PLAYER';
export const REMOVE_PLAYER = 'player/REMOVE_PLAYER';
export const UPDATE_PLAYER_SCORE = 'player/UPDATE_PLAYER_SCORE';

import * as PlayerActionTypes from '../actiontypes/player';

export const addPlayer = name => {
    return {
        type: PlayerActionTypes.ADD_PLAYER,
        name
    };
};

export const removePlayer = index => {
    return {
        type: PlayerActionTypes.REMOVE_PLAYER,
        index
    };
};

export const updatePlayerScore = (index, score) => {
    return {
        type: PlayerActionTypes.UPDATE_PLAYER_SCORE,
        index, 
        score
    };
};

import * as PlayerActionTypes from '../actiontypes/player';

const initialState = [
    {
        name: 'Jim Hoskins',
        score: 31,
    },
     {
        name: 'Andrew Chalkley',
        score: 20,
    },
    {
        name: 'Alena Holligan',
        score: 50,
    },
];

export default function Player( state = initialState, action ) {
    switch(action.type) {
        case PlayerActionTypes.ADD_PLAYER:
        return [
            ...state,
            {
                name: action.name,
                score: 0
            }
        ];

        case PlayerActionTypes.REMOVE_PLAYER:
        return [
            ...state.slice(0, action.index),
            ...state.slice(action.index + 1)
        ];

        case PlayerActionTypes.UPDATE_PLAYER_SCORE:
        return state.map((player, index) => {
            if(index === action.index) {
                return {
                    ...player,
                    score: player.score + action.score
                };
            }
            return player;
        });

        default: 
            return state;
    }
}

import React, { PropTypes } from 'react';

import Counter from './Counter';

const Player= props => {
    return (
      <div className="player">
        <div className="player-name">
          <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>
    );
}

Player.propTypes = {
    name: PropTypes.string.isRequired,
    index: PropTypes.number.isRequired,
    score: PropTypes.number.isRequired,
    removePlayer: PropTypes.func.isRequired,
    updatePlayerScore: PropTypes.func.isRequired
};

export default Player;

import React, { PropTypes } from 'react';

const Counter = props => {
    return (
      <div className="counter" >
        <button 
          className="counter-action decrement" 
          onClick={ () => props.updatePlayerScore(props.index, -1)}>
          -
        </button>
        <div className="counter-score"> {props.score} </div>
        <button 
          className="counter-action increment" 
          onClick={ () => props.updatePlayerScore(props.index, 1)}>
          +
        </button>
      </div>
    );
}

Counter.propTypes = {
    updatePlayerScore: PropTypes.func.isRequired,
    index: PropTypes.number.isRequired,
    score: PropTypes.number.isRequired,
};

export default Counter;

import React, { Component, PropTypes } from 'react';

export default class AddPlayerForm extends Component {
    static propTypes: {
        addPlayer: PropTypes.func.isRequired,
    };

    state = {
        name: ""
    };

    onNameChange = e => {
        const name = e.target.value;
        this.setState({ name: name });
    };

    addPlayer = e => {
        if (e) e.preventDefault();
        this.props.addPlayer(this.state.name);
        this.setState({ name: '' });
    };

    render() {
        return (
          <div className="add-player-form">
            <form onSubmit={this.addPlayer}>
              <input
                type="text"
                value={this.state.name}
                onChange={this.onNameChange}
                placeholder="Player Name"
              />
              <input type="submit" value="Add Player" />
            </form>
          </div>
        );
    }
}

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import PlayerReducer from './src/reducers/player';
import Scoreboard from './src/containers/Scoreboard';   

const store = createStore(
    PlayerReducer
);

render (
    <Provider store={store}>
        <Scoreboard />
    </Provider>,
    document.getElementById('root')
);