只做了分页 时间有限

package.json

@@ -10,15 +10,23 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
+    "element-react": "^1.4.34",
+    "element-theme-default": "^1.4.13",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-hot-loader": "^4.12.21",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5"
   },
   "devDependencies": {
     "react-scripts": "3.4.0"
   },
-  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

src/actions/PlayersActions.js

@@ -20,3 +20,11 @@ export function starPlayer(id) {
     id,
   };
 }
+
+
+export function pageCurrentChangePlayer(currentPage) {
+  return {
+    type: types.PAGE_CURRENT_CHANGE_PLAYER,
+    currentPage,
+  };
+}

src/components/PlayerList.js

@@ -3,24 +3,34 @@ import PropTypes from 'prop-types';
 import styles from './PlayerList.css';
 import PlayerListItem from './PlayerListItem';
 
+import { Pagination } from 'element-react';
+
+
 class PlayerList extends Component {
   render() {
     return (
+      <div>
       <ul className={styles.playerList}>
-        {this.props.players.map((player, index) => {
-          return (
-            <PlayerListItem
-              key={index}
-              id={index}
-              name={player.name}
-              team={player.team}
-              position={player.position}
-              starred={player.starred}
-              {...this.props.actions}
-            />
-          );
+        {this.props.players.map((player, index) => {          
+          if(index >= (this.props.currentPage-1)*10 && index < this.props.currentPage * 10){
+            return (
+              <PlayerListItem
+                key={index}
+                id={index}
+                name={player.name}
+                team={player.team}
+                position={player.position}
+                starred={player.starred}
+                {...this.props.actions}
+              />
+            );
+          }
         })}
       </ul>
+      <div>
+      <Pagination layout="total, prev, pager, next" total={this.props.players.length} onCurrentChange={this.props.actions.pageCurrentChangePlayer}/>
+      </div>
+      </div>
     );
   }
 }

src/components/PlayerListItem.js

@@ -21,7 +21,7 @@ class PlayerListItem extends Component {
           <button
             className={`btn btn-default ${styles.btnAction}`}
             onClick={() => this.props.starPlayer(this.props.id)}
-          >
+          >4
             <i
               className={classnames('fa', {
                 'fa-star': this.props.starred,
@@ -32,7 +32,7 @@ class PlayerListItem extends Component {
           <button
             className={`btn btn-default ${styles.btnAction}`}
             onClick={() => this.props.deletePlayer(this.props.id)}
-          >
+          > 5
             <i className="fa fa-trash" />
           </button>
         </div>

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 PAGE_CURRENT_CHANGE_PLAYER = 'PAGE_CURRENT_CHANGE_PLAYER';

src/containers/App.js

@@ -1,4 +1,8 @@
 import React, { Component } from 'react';
+
+
+import 'element-theme-default';
+
 import { combineReducers, createStore } from 'redux';
 import { Provider } from 'react-redux';
 

src/containers/PlayerListApp.js

@@ -2,26 +2,28 @@ import React, { Component } from 'react';
 import styles from './PlayerListApp.css';
 import { connect } from 'react-redux';
 
-import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions';
+import { addPlayer, deletePlayer, starPlayer,pageCurrentChangePlayer } from '../actions/PlayersActions';
+
 import { PlayerList, AddPlayerInput } from '../components';
 
 class PlayerListApp extends Component {
   render() {
     const {
-      playerlist: { playersById },
+      playerlist: { playersById }
     } = this.props;
 
     const actions = {
       addPlayer: this.props.addPlayer,
       deletePlayer: this.props.deletePlayer,
       starPlayer: this.props.starPlayer,
+      pageCurrentChangePlayer: this.props.pageCurrentChangePlayer
     };
 
     return (
       <div className={styles.playerListApp}>
         <h1>NBA Players</h1>
         <AddPlayerInput addPlayer={actions.addPlayer} />
-        <PlayerList players={playersById} actions={actions} />
+        <PlayerList players={playersById} currentPage={this.props.playerlist.currentPage} actions={actions} />
       </div>
     );
   }
@@ -37,5 +39,6 @@ export default connect(
     addPlayer,
     deletePlayer,
     starPlayer,
+    pageCurrentChangePlayer
   },
 )(PlayerListApp);

src/reducers/playerlist.js

@@ -37,8 +37,39 @@ const initialState = {
       team: 'TORONTO RAPTORS',
       position: 'SF',
       starred: false,
+    },{
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
+    },{
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
+    },{
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
+    },{
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
+    },{
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
+    },{
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
     },
   ],
+  currentPage: 1
 };
 
 export default function players(state = initialState, action) {
@@ -55,13 +86,21 @@ export default function players(state = initialState, action) {
           },
         ],
       };
+
+
+
     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);
@@ -71,6 +110,20 @@ export default function players(state = initialState, action) {
         playersById: players,
       };
 
+
+
+    case types.PAGE_CURRENT_CHANGE_PLAYER:
+
+    let curPage = action.currentPage;
+
+    return {
+      ...state,
+      currentPage: curPage
+    };
+
+
+
+
     default:
       return state;
   }