提交代码

package.json

@@ -12,13 +12,24 @@
     "classnames": "^2.2.6",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
+    "ramda": "^0.27.0",
+    "rc-pagination": "^2.0.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-redux": "^7.2.0",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-observable": "^1.2.0",
+    "rxjs": "^6.5.4",
+    "rxjs-compat": "^6.5.4"
   },
   "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/Epics/index.js

@@ -0,0 +1,15 @@
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/catch';
+import { ajax } from 'rxjs/observable/dom/ajax';
+import { combineEpics } from 'redux-observable';
+// import {SELECT_PLAYER} from '../constants/ActionTypes';
+// const url = '';
+//  const ListEpic= (action$)=> (
+    //  action$
+        // .ofType(SELECT_PLAYER)
+    //     .catch((error) =>console.log(error))
+    // 可以截取action，拍扁成流形式，在这里进行异步请求数据处理之类，。rxjs提供了很多异步处理操作符，
+// )
+
+// export const rootEpic = combineEpics(ListEpic);
+export const rootEpic = combineEpics();

src/actions/PlayersActions.js

@@ -20,3 +20,12 @@ export function starPlayer(id) {
     id,
   };
 }
+
+export function selectedPlay(id,selected) {
+
+  return {
+    type: types.SELECT_PLAYER,
+    id,
+    selected,
+  };
+}

src/components/AddPlayerInput.js

@@ -4,19 +4,6 @@ import PropTypes from 'prop-types';
 import styles from './AddPlayerInput.css';
 
 class AddPlayerInput extends Component {
-  render() {
-    return (
-      <input
-        type="text"
-        autoFocus={true}
-        className={classnames('form-control', styles.addPlayerInput)}
-        placeholder="Type the name of a player"
-        value={this.state.name}
-        onChange={this.handleChange.bind(this)}
-        onKeyDown={this.handleSubmit.bind(this)}
-      />
-    );
-  }
 
   constructor(props, context) {
     super(props, context);
@@ -36,6 +23,20 @@ class AddPlayerInput extends Component {
       this.setState({ name: '' });
     }
   }
+  render() {
+    return (
+      <input
+        type="text"
+        autoFocus={true}
+        className={classnames('form-control', styles.addPlayerInput)}
+        placeholder="Type the name of a player"
+        value={this.state.name}
+        onChange={this.handleChange.bind(this)}
+        onKeyDown={this.handleSubmit.bind(this)}
+      />
+    );
+  }
+
 }
 
 AddPlayerInput.propTypes = {

src/components/PlayerList.css

@@ -2,3 +2,19 @@
   padding-left: 0;
   margin-bottom: 0;
 }
+.footer {
+  display: flex;
+  margin: 20px 0;
+  font-size:16px;
+}
+
+
+.rcPagination {
+  display: flex;
+  list-style: none;
+  padding-left: 10px;
+}
+.rcPagination li{
+  margin: 0 10px;
+
+}

src/components/PlayerList.js

@@ -1,26 +1,75 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styles from './PlayerList.css';
+import './PlayerList.css';
+
 import PlayerListItem from './PlayerListItem';
+import * as R from 'ramda';
+import Pagination from 'rc-pagination';
+
+const isArray = (Arr) => {
+  return R.is(Array, Arr) && !R.isEmpty(Arr)
+}
+
+class PlayerList extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      page: 5,
+      current: 1,
+    }
+  }
+  pageNum = (current) => {
+    this.setState({
+      current
+    });
+  }
 
-class PlayerList extends Component {
   render() {
+    const { players } = this.props;
+    const { current, page } = this.state;
+
+    const getCurrentList = (list, current, page) => {
+      return R.slice(page * current - page, page * current)(list)
+    }
+
     return (
-      <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}
+      <div>
+        <ul className={styles.playerList}>
+          {getCurrentList(players, current, page).map((player, index) => {
+            return (
+              <PlayerListItem
+                key={index}
+                id={index}
+                name={player.name}
+                team={player.team}
+                position={player.position}
+                starred={player.starred}
+                {...this.props.actions}
+              />
+            );
+          })}
+        </ul>
+
+        {
+          isArray(players) && players.length > 5 &&
+          (<footer className={'footer'}>
+            <span>分页:</span>
+            <Pagination
+              current={current}
+              onChange={this.pageNum}
+              total={players.length}
+              defaultPageSize={page}
+              className={'rcPagination'}
+              pageSize={page}
+              showQuickJump
             />
-          );
-        })}
-      </ul>
+          </footer>
+          )
+        }
+
+      </div>
     );
   }
 }

src/components/PlayerList.test.js

@@ -0,0 +1,18 @@
+import * as R from 'ramda';
+
+const isArray = (Arr) => {
+  return R.is(Array, Arr) && !R.isEmpty(Arr)
+}
+
+const getCurrentList = (list, current, page) => {
+    return R.slice(page * current - page, page * current)(list)
+  }
+
+
+test('测试isArray和getCurrentList方法，获取current页数，每页5个,结果是否正确', () => {
+    const testList = [1,2,3,4,5,6,7,8,9,10,11]
+    const current = 2;
+    const page = 5
+    expect(getCurrentList(testList,current,page)).toEqual([6,7,8,9,10]);
+
+  })

src/components/PlayerListItem.css

@@ -29,3 +29,7 @@
 button:focus {
   outline: 0 !important;
 }
+
+.selectPlay {
+height: 34px;
+}

src/components/PlayerListItem.js

@@ -3,7 +3,18 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './PlayerListItem.css';
 
+const options = [
+  {key:'SF',value:'SF'},
+  {key:'SG',value:'SG'},
+  {key:'PE',value:'PE'},
+  {key:'PG',value:'PG'},
+]
 class PlayerListItem extends Component {
+
+  componentDidMount() {
+    // console.log(this.props)
+  }
+
   render() {
     return (
       <li className={styles.playerListItem}>
@@ -35,6 +46,15 @@ class PlayerListItem extends Component {
           >
             <i className="fa fa-trash" />
           </button>
+          <select onChange={(e) => this.props.selectedPlay(this.props.id,e.target.value)} value={this.props.position}  className={`btn btn-default selectPlay`}>
+            {
+              options.map((item,index)=>{
+                return (
+                  <option value={item.key} key={index}>{item.value}</option>
+                )
+              })
+            }
+          </select>
         </div>
       </li>
     );
@@ -48,6 +68,7 @@ PlayerListItem.propTypes = {
   position: PropTypes.string.isRequired,
   starred: PropTypes.bool,
   starPlayer: PropTypes.func.isRequired,
+  selectedPlay:PropTypes.func.isRequired,
 };
 
 export default PlayerListItem;

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

src/containers/App.js

@@ -1,12 +1,20 @@
 import React, { Component } from 'react';
-import { combineReducers, createStore } from 'redux';
+import { applyMiddleware,combineReducers, createStore } from 'redux';
 import { Provider } from 'react-redux';
+import { createEpicMiddleware } from 'redux-observable';
+import { composeWithDevTools } from 'redux-devtools-extension'
+import { rootEpic } from '../Epics';
 
 import PlayerListApp from './PlayerListApp';
 import * as reducers from '../reducers';
 
+//  实例化一个epic异常流框架
+const epicMiddleware = createEpicMiddleware();
 const reducer = combineReducers(reducers);
-const store = createStore(reducer);
+const store = createStore(reducer, composeWithDevTools(applyMiddleware(epicMiddleware)))
+
+epicMiddleware.run(rootEpic);
+
 
 export default class App extends Component {
   render() {

src/containers/PlayerListApp.js

@@ -2,7 +2,7 @@ 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,selectedPlay } from '../actions/PlayersActions';
 import { PlayerList, AddPlayerInput } from '../components';
 
 class PlayerListApp extends Component {
@@ -15,6 +15,7 @@ class PlayerListApp extends Component {
       addPlayer: this.props.addPlayer,
       deletePlayer: this.props.deletePlayer,
       starPlayer: this.props.starPlayer,
+      selectedPlay:this.props.selectedPlay,
     };
 
     return (
@@ -37,5 +38,6 @@ export default connect(
     addPlayer,
     deletePlayer,
     starPlayer,
+    selectedPlay,
   },
 )(PlayerListApp);

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './containers/App';
+// import 'rc-pagination/dist/rc-pagination.min.css';
 import './index.css';
 
 ReactDOM.render(

src/reducers/playerlist.js

@@ -70,7 +70,15 @@ export default function players(state = initialState, action) {
         ...state,
         playersById: players,
       };
+      case types.SELECT_PLAYER:
+        let Arr = [...state.playersById];
+        let getItem = Arr.find((item, index) => index === action.id);
+        getItem.position = action.selected;
 
+        return {
+          ...state,
+          playersById: Arr,
+        };
     default:
       return state;
   }