diff --git a/src/actions/PlayersActions.js b/src/actions/PlayersActions.js
index 8f427c2..ec7e1e9 100755
--- a/src/actions/PlayersActions.js
+++ b/src/actions/PlayersActions.js
@@ -1,22 +1,35 @@
 import * as types from '../constants/ActionTypes';
 
 export function addPlayer(name) {
-  return {
-    type: types.ADD_PLAYER,
-    name,
-  };
+    return {
+        type: types.ADD_PLAYER,
+        name,
+    };
 }
 
-export function deletePlayer(id) {
-  return {
-    type: types.DELETE_PLAYER,
-    id,
-  };
+export function deletePlayer(name) {
+    return {
+        type: types.DELETE_PLAYER,
+        name,
+    };
 }
 
 export function starPlayer(id) {
-  return {
-    type: types.STAR_PLAYER,
-    id,
-  };
+    return {
+        type: types.STAR_PLAYER,
+        id,
+    };
+}
+
+export function selectPosition(value) {
+    return {
+        type: types.SELECT_PLAYER,
+        position: value
+    }
+}
+export function currentPageChange(current){
+    return {
+        type:types.CURRENT_PAGE,
+        current:current
+    }
 }
diff --git a/src/components/AddPlayerInput.js b/src/components/AddPlayerInput.js
index 5d914d8..927b516 100755
--- a/src/components/AddPlayerInput.js
+++ b/src/components/AddPlayerInput.js
@@ -31,7 +31,12 @@ class AddPlayerInput extends Component {
 
   handleSubmit(e) {
     const name = e.target.value.trim();
+    const {playersByIdList} =this.props
     if (e.which === 13) {
+      // 应为通过名称来匹配删除，所以名称不可重复
+      if(playersByIdList.some((item,index)=>item.name===name)){
+        return alert('名称不可重复')
+      }
       this.props.addPlayer(name);
       this.setState({ name: '' });
     }
@@ -40,6 +45,8 @@ class AddPlayerInput extends Component {
 
 AddPlayerInput.propTypes = {
   addPlayer: PropTypes.func.isRequired,
+  playersByIdList: PropTypes.array.isRequired,
+
 };
 
 export default AddPlayerInput;
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
new file mode 100644
index 0000000..ff8584f
--- /dev/null
+++ b/src/components/Pagination.js
@@ -0,0 +1,50 @@
+import React from "react";
+import {currentPageChange} from "../actions/PlayersActions";
+import {connect} from "react-redux";
+import PropTypes from "prop-types";
+import AddPlayerInput from "./AddPlayerInput";
+
+function Pagination(props) {
+    const {
+        playerList: {currentPage}, playersList
+    } = props
+
+    function topPage() {
+        if (currentPage === 1) return
+        props.currentPageChange(currentPage - 1)
+    }
+
+    function btmPage() {
+        if (Math.ceil(playersList.length / 5) === currentPage) return
+        props.currentPageChange(currentPage + 1)
+    }
+
+    let list = props.playersList.map((item, index) => {
+        return Math.ceil((index + 1) / 5)
+    })
+    list = list?.length ? [...new Set(list)] : []
+
+    return (
+        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+        }}>
+            <span className={'mr-10 icon'} onClick={topPage}> {`<`} </span>
+            {list?.map((item, index) => {
+                return <span
+                    className={'mr-10 icon'}
+                    style={{color: currentPage === index+1 ? 'red' : ''}}
+                    key={index}
+                    onClick={() => {
+                        props.currentPageChange(item)
+                    }
+                    }>{item}</span>
+
+            })}
+            <span className={'icon'} onClick={btmPage}> {`>`} </span>
+        </div>
+    )
+}
+export default connect(({playerList}) => ({playerList}), {
+    currentPageChange
+})(Pagination)
\ No newline at end of file
diff --git a/src/components/PlayerListItem.js b/src/components/PlayerListItem.js
index ec9758c..457e14a 100755
--- a/src/components/PlayerListItem.js
+++ b/src/components/PlayerListItem.js
@@ -19,7 +19,7 @@ class PlayerListItem extends Component {
         </div>
         <div className={styles.playerActions}>
           <button
-            className={`btn btn-default ${styles.btnAction}`}
+            className={`btn btn-default ${styles.btnAction} mr-10`}
             onClick={() => this.props.starPlayer(this.props.id)}
           >
             <i
@@ -31,7 +31,7 @@ class PlayerListItem extends Component {
           </button>
           <button
             className={`btn btn-default ${styles.btnAction}`}
-            onClick={() => this.props.deletePlayer(this.props.id)}
+            onClick={() => this.props.deletePlayer(this.props.name)}
           >
             <i className="fa fa-trash" />
           </button>
diff --git a/src/components/SelectPosition.js b/src/components/SelectPosition.js
new file mode 100644
index 0000000..001ad2f
--- /dev/null
+++ b/src/components/SelectPosition.js
@@ -0,0 +1,29 @@
+import React from "react";
+import {connect} from 'react-redux';
+import {PositionType} from '../enumeration'
+import {selectPosition} from '../actions/PlayersActions';
+
+
+function SelectPosition(props) {
+    return (
+        <div>
+            <select
+                style={{width:'180px',margin:'20px 0'}}
+                onChange={(event) => {
+                    props.selectPosition(event.target.value)
+                }}>
+                {PositionType.map((item, index) => (
+                    <option  key={index} value={item}>
+                        {item}
+                    </option>
+                ))}
+            </select>
+        </div>
+    )
+}
+
+export default connect(function (state) {
+    return state
+}, {
+    selectPosition
+})(SelectPosition)
\ No newline at end of file
diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js
index b796fae..d2c8165 100755
--- a/src/constants/ActionTypes.js
+++ b/src/constants/ActionTypes.js
@@ -1,3 +1,5 @@
 export const ADD_PLAYER = 'ADD_PLAYER';
 export const STAR_PLAYER = 'STAR_PLAYER';
 export const DELETE_PLAYER = 'DELETE_PLAYER';
+export const SELECT_PLAYER = 'SELECT_PLAYER'
+export const CURRENT_PAGE = 'CURRENT_PAGE'
diff --git a/src/containers/PlayerListApp.css b/src/containers/PlayerListApp.css
index f438bf1..1299cb9 100755
--- a/src/containers/PlayerListApp.css
+++ b/src/containers/PlayerListApp.css
@@ -22,3 +22,18 @@ body {
   padding-left: 10px;
   font-family: Helvetica;
 }
+.mr-10{
+  margin-right: 10px;
+}
+.icon{
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 12px;
+  text-align: center;
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  outline: none;
+  transition: all .3s;
+}
\ No newline at end of file
diff --git a/src/containers/PlayerListApp.js b/src/containers/PlayerListApp.js
index 0e4bfa5..9b225f7 100755
--- a/src/containers/PlayerListApp.js
+++ b/src/containers/PlayerListApp.js
@@ -1,41 +1,55 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import styles from './PlayerListApp.css';
-import { connect } from 'react-redux';
+import {connect} from 'react-redux';
 
-import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions';
-import { PlayerList, AddPlayerInput } from '../components';
+import {addPlayer, deletePlayer, starPlayer,} from '../actions/PlayersActions';
+import {PlayerList, AddPlayerInput} from '../components';
+import SelectPosition from "../components/SelectPosition";
+import Pagination from "../components/Pagination";
 
 class PlayerListApp extends Component {
-  render() {
-    const {
-      playerlist: { playersById },
-    } = this.props;
+    render() {
+        console.log(this.props, 'props')
+        const {
+            playerList: {playersById, position, currentPage}
+        } = this.props;
+        let playersByIds = position !== '全部类型' ? playersById.filter((item, index) => item.position === position) : playersById
+        let currentPlayersByIds = playersByIds?.filter((item, index) => {
+            if (
+                Math.ceil((index + 1) / 5) === currentPage) {
+                return true
+            }
+        })
+        console.log(playersByIds, 'currentPlayersByIds', currentPlayersByIds)
+        const actions = {
+            addPlayer: this.props.addPlayer,
+            deletePlayer: this.props.deletePlayer,
+            starPlayer: this.props.starPlayer,
+        };
 
-    const actions = {
-      addPlayer: this.props.addPlayer,
-      deletePlayer: this.props.deletePlayer,
-      starPlayer: this.props.starPlayer,
-    };
-
-    return (
-      <div className={styles.playerListApp}>
-        <h1>NBA Players</h1>
-        <AddPlayerInput addPlayer={actions.addPlayer} />
-        <PlayerList players={playersById} actions={actions} />
-      </div>
-    );
-  }
+        return (
+            <div className={styles.playerListApp}>
+                <h1>NBA Players</h1>
+                <AddPlayerInput addPlayer={actions.addPlayer} playersByIdList={playersById}/>
+                <SelectPosition/>
+                <PlayerList players={currentPlayersByIds} actions={actions}/>
+                {currentPlayersByIds.length ? <div>
+                    <Pagination playersList={playersByIds}/>
+                </div>:<div>暂无数据</div>}
+            </div>
+        );
+    }
 }
 
 function mapStateToProps(state) {
-  return state;
+    return state;
 }
 
 export default connect(
-  mapStateToProps,
-  {
-    addPlayer,
-    deletePlayer,
-    starPlayer,
-  },
+    mapStateToProps,
+    {
+        addPlayer,
+        deletePlayer,
+        starPlayer,
+    },
 )(PlayerListApp);
diff --git a/src/enumeration.js b/src/enumeration.js
new file mode 100644
index 0000000..9be7e65
--- /dev/null
+++ b/src/enumeration.js
@@ -0,0 +1,4 @@
+export const PositionType = [
+    '全部类型','SF','PF','PG','SG',
+
+]
\ No newline at end of file
diff --git a/src/reducers/index.js b/src/reducers/index.js
index dfcdc70..cc5c6ad 100755
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1 +1 @@
-export { default as playerlist } from './playerlist';
+export { default as playerList } from './playerList';
diff --git a/src/reducers/playerlist.js b/src/reducers/playerlist.js
index 1bc7457..5c941eb 100755
--- a/src/reducers/playerlist.js
+++ b/src/reducers/playerlist.js
@@ -1,77 +1,92 @@
 import * as types from '../constants/ActionTypes';
 
-const initialState = {
-  playersById: [
-    {
-      name: 'LeBron James',
-      team: 'LOS ANGELES LAKERS',
-      position: 'SF',
-      starred: true,
-    },
-    {
-      name: 'Kevin Duran',
-      team: 'GOLDEN STATE WARRIORS',
-      position: 'SF',
-      starred: false,
-    },
-    {
-      name: 'Anthony Davis',
-      team: 'NEW ORLEANS PELICANS',
-      position: 'PF',
-      starred: false,
-    },
-    {
-      name: 'Stephen Curry',
-      team: 'GOLDEN STATE WARRIORS',
-      position: 'PG',
-      starred: false,
-    },
-    {
-      name: 'James Harden',
-      team: 'HOUSTON ROCKETS',
-      position: 'SG',
-      starred: false,
-    },
-    {
-      name: 'Kawhi Leonard',
-      team: 'TORONTO RAPTORS',
-      position: 'SF',
-      starred: false,
-    },
-  ],
-};
 
-export default function players(state = initialState, action) {
-  switch (action.type) {
-    case types.ADD_PLAYER:
-      return {
-        ...state,
-        playersById: [
-          ...state.playersById,
-          {
-            name: action.name,
+const initialState = {
+    playersById: [
+        {
+            name: 'LeBron James',
             team: 'LOS ANGELES LAKERS',
             position: 'SF',
-          },
-        ],
-      };
-    case types.DELETE_PLAYER:
-      return {
-        ...state,
-        playersById: state.playersById.filter(
-          (item, index) => index !== action.id,
-        ),
-      };
-    case types.STAR_PLAYER:
-      let players = [...state.playersById];
-      let player = players.find((item, index) => index === action.id);
-      player.starred = !player.starred;
-      return {
-        ...state,
-        playersById: players,
-      };
+            starred: true,
+        },
+        {
+            name: 'Kevin Duran',
+            team: 'GOLDEN STATE WARRIORS',
+            position: 'SF',
+            starred: false,
+        },
+        {
+            name: 'Anthony Davis',
+            team: 'NEW ORLEANS PELICANS',
+            position: 'PF',
+            starred: false,
+        },
+        {
+            name: 'Stephen Curry',
+            team: 'GOLDEN STATE WARRIORS',
+            position: 'PG',
+            starred: false,
+        },
+        {
+            name: 'James Harden',
+            team: 'HOUSTON ROCKETS',
+            position: 'SG',
+            starred: false,
+        },
+        {
+            name: 'Kawhi Leonard',
+            team: 'TORONTO RAPTORS',
+            position: 'SF',
+            starred: false,
+        },
+    ],
+    position: '全部类型',
+    currentPage: 1
+};
 
-    default:
-      return state;
-  }
+export default function players(state = initialState, action) {
+    switch (action.type) {
+        case types.ADD_PLAYER:
+            return {
+                ...state,
+                currentPage: 1,
+                playersById: [
+                    ...state.playersById,
+                    {
+                        name: action.name,
+                        team: 'LOS ANGELES LAKERS',
+                        position: 'SF',
+                    },
+                ],
+            };
+        case types.DELETE_PLAYER:
+            return {
+                ...state,
+                currentPage: 1,
+                playersById: state.playersById.filter(
+                    (item, index) => item.name !== action.name,
+                ),
+            };
+        case types.STAR_PLAYER:
+            let players = [...state.playersById];
+            let player = players.find((item, index) => index === action.id);
+            player.starred = !player.starred;
+            return {
+                ...state,
+                playersById: players,
+            };
+        case types.SELECT_PLAYER:
+            return {
+                ...state,
+                currentPage: 1,
+                position: action.position
+            };
+        case types.CURRENT_PAGE:
+            return {
+                ...state,
+                currentPage: action.current
+            }
+        default:
+            return state;
+    }
 }