优化

src/assets/utils.js

+export const calcWinner = (item) => {
+    const array = [
+        [0, 1, 2],
+        [3, 4, 5],
+        [6, 7, 8],
+        [0, 3, 6],
+        [1, 4, 7],
+        [2, 5, 8],
+        [0, 4, 8],
+        [2, 4, 6]
+    ]
+    let rst = '';
+    array.map(items => {
+        let [a, b, c] = items;
+        if (item[a] && item[b] && item[c]) {
+            if (item[a] === item[b] && item[c] === item[b]) {
+                rst = item[a];
+                return rst;
+            }
+        }
+        return rst;
+    })
+    return rst;
+}
\ No newline at end of file

src/components/Container.jsx

+import React, { Component, Children } from 'react';
+import { Layout } from 'antd';
+
+const {Content} = Layout;
+class Container extends Component {
+    render() {
+        return (
+            <Layout>
+                <Content>
+                {Children}
+                </Content>
+            </Layout>
+        )
+    }
+}
+export default Container;

src/index.js

@@ -9,7 +9,7 @@ const app = dva();
 // app.use({});
 
 // 3. Model
-app.model(require('./models/container').default);
+app.model(require('./models/board').default);
 
 // 4. Router
 app.router(require('./router').default);

src/models/app.js

+export default {
+    nameSpace: 'app',
+    state: {
+        switchKeys: ''
+    },
+    effect: {},
+    subscription: {},
+    reducers: {
+        updateState(state, { payload }) {
+            return {
+                ...state,
+                ...payload
+            }
+        }
+    },
+}
\ No newline at end of file

src/models/container.js → src/models/board.js

-
+import { calcWinner } from '../assets/utils';
 export default {
 
   namespace: 'con',
 
   state: {
     playerValue: 'x',// x or o
-    record: [],
+    records: [new Array(9).fill(null)],
     step: 0,
     winner: '',
-    history: ''
+    coordinate: []
   },
 
   subscriptions: {
@@ -27,37 +27,57 @@ export default {
     // *isComplete() {
 
     // }
-    // *fetch({ payload }, { call, put }) {  // eslint-disable-line
-    //   yield put({ type: 'save' });
-    // },
+    *fetch({ payload }, { call, put, select }) {  // eslint-disable-line
+      const { step: newStep, records: newRecords, coordinate: newCoordinate } = payload
+      const { step: oldStep, records: oldRecords, coordinate: oldCoordinate } = yield select((state) => state.con);
+      const func = (item, stepNum) => {
+        let temp = JSON.parse(JSON.stringify(item));
+        temp = newStep === oldRecords.length ? temp : temp.slice(0, stepNum)
+        return temp;
+      }
+      let oldCd = func(oldCoordinate, oldStep)
+      let oldRc = func(oldRecords, newStep)
+      let tmp = JSON.parse(JSON.stringify([newRecords]))
+      const winner = calcWinner(...tmp)
+      yield put({
+        type: 'updateState', payload: {
+          records: oldRc.concat(tmp),
+          step: newStep,
+          playerValue: oldStep % 2 === 0 ? 'o' : 'x',
+          winner,
+          coordinate: oldCd.concat({ step: newStep, coordinate: newCoordinate })
+        }
+      });
+    },
   },
 
   reducers: {
-    updateState(state, action) {
-      return { ...state, ...action.payload };
-    },
-    checkMate(state, action) {
+    updateState(state, { payload }) {
       return {
         ...state,
-        winner: action.winner
-      }
+        ...payload
+      };
     },
     reset(state) {
       return {
         ...state,
         playerValue: 'x',// x or o
-        record: [],
+        records: [new Array(9).fill(null)],
         step: 0,
-        winner: ''
+        winner: '',
+        coordinate: []
       }
     },
-    goBack(state, action) {
+    goBack(state, { payload }) {
+      const { step, playerValue } = payload;
+      const { records } = state;
       return {
         ...state,
-        ...action.payload
+        winner: calcWinner(records[step]),
+        playerValue,
+        step
       }
     }
-
   },
 
 };

src/router.js

 import React from 'react';
 import { Router, Route, Switch } from 'dva/router';
-import Container from './routes/Container';
+import Index from './routes/Index';
 
 function RouterConfig({ history }) {
   return (
     <Router history={history}>
       <Switch>
-        <Route path="/con" exact component={Container} />
+        <Route path="/con" exact component={Index} />
       </Switch>
     </Router>
   );

src/routes/Container.js → src/routes/Board.jsx

 import React from 'react';
 import { connect } from 'dva';
-import styles from './container.css';
+import styles from './board.css';
 import Square from '../components/Square';
-import RecordTable from '../components/RecordTable';
 import { Button } from 'antd';
 
-
-function Container({ dispatch, con }) {
-  const { playerValue, record, step, winner } = con;
-  const latestMove = step === 0 ? new Array(9).fill(null) : record[step - 1].records;
-  const array = [
-    [0, 1, 2],
-    [3, 4, 5],
-    [6, 7, 8],
-    [0, 3, 6],
-    [1, 4, 7],
-    [2, 5, 8],
-    [0, 4, 8],
-    [2, 4, 6]
-  ]
-  const calcWinner = (item) => {
-    let rst = '';
-    array.map(items => {
-      let [a, b, c] = items;
-      if (item[a] && item[b] && item[c]) {
-        if (item[a] === item[b] && item[c] === item[b]) {
-          rst = item[a];
-          return rst;
-        }
-      }
-      return rst;
-    })
-    return rst;
-  }
-
+function Board({ dispatch, con }) {
+  const { playerValue, records, step, winner } = con;
   const mapSquare = (item, index, row) => {
-    let chess = [];
     const play = (index, row) => {
       if (winner === '') {
-        let next = step % 2 === 0 ? 'o' : 'x';
-        let newArr = step === 0 ? new Array(9).fill(null) : Object.assign([], record[step - 1].records);//备份数组用作后续修改
         const handlerChange = (arr) => {
           dispatch({
-            type: 'con/updateState',
+            type: 'con/fetch',
             payload: {
-              playerValue: next,
-              record: step === record.length ? record.concat({
-                step: step + 1,
-                coordinate: `[${row}, ${index}]`,
-                records: chess.concat(arr)
-              }) : record.slice(0, step).concat({
-                step: step + 1,
               coordinate: `[${row}, ${index}]`,
-                records: chess.slice(0, step).concat(arr)
-              }),
+              records: arr,
               step: step + 1
             }
           })
-          if (calcWinner(arr) !== '') {
-            dispatch({
-              type: 'con/checkMate',
-              winner: calcWinner(arr)
-            })
-          }
         }
+        let newArr = JSON.parse(JSON.stringify(records));
+        const latestMove = newArr[step];
         switch (row) {
           case 0:
             if (latestMove[index] !== null) {
               alert('这个位置被占啦，换个地方吧~')
             } else {
-              newArr.splice(index, 1, playerValue);
-              handlerChange(newArr);
+              newArr[step].splice(index, 1, playerValue);
+              handlerChange(newArr[step]);
             }
             break;
           case 1:
             if (latestMove[index + 3] !== null) {
               alert('这个位置被占啦，换个地方吧~')
             } else {
-              newArr.splice(index + 3, 1, playerValue);;
-              handlerChange(newArr);
+              newArr[step].splice(index + 3, 1, playerValue);
+              handlerChange(newArr[step]);
             }
             break;
           case 2:
             if (latestMove[index + 6] !== null) {
               alert('这个位置被占啦，换个地方吧~')
             } else {
-              newArr.splice(index + 6, 1, playerValue);;
-              handlerChange(newArr);
+              newArr[step].splice(index + 6, 1, playerValue);
+              handlerChange(newArr[step]);
             }
             break;
           default:
             break;
         }
-        // 坐标 00 01 02,10 11 12,20 21 22,00 10 20,01 11 21, 02 10 22,00 11 22,02 11 20 
-        // 行 数组下标 
-        // 0 1 2,3 4 5,6 7 8, 0 3 6, 1 4 7, 2 5 8, 0 4 8, 2 4 6
       } else {
         alert('你已经赢了，再来一局吧~')
         return;
@@ -104,45 +58,11 @@ function Container({ dispatch, con }) {
     return <Square key={index} value={item} onClick={() => play(index, row)} />
   }
   const reset = () => {
-    dispatch({
-      type: 'con/reset',
-      // payload: {
-      //   playerValue: 'x',// x or o
-      //   record: [],
-      //   step: 0,
-      //   winner: ''
-      // }
-    })
-  }
-  const recall = (records, index) => {
-    let next = index % 2 === 0 ? 'o' : 'x';
-    // console.log(index)
-    dispatch({
-      type: 'con/goBack',
-      payload: {
-        winner: calcWinner(records.records),
-        step: index + 1,
-        playerValue: next
+    dispatch({type: 'con/reset'})
   }
-    })
-  }
-  const column = [
-    {
-      title: '步数',
-      key: 'step',
-      dataIndex: 'step',
-      render: (text, records, index) => <Button className={styles.step} onClick={() => recall(records, index)}>{text}</Button>
-    },
-    {
-      title: '坐标',
-      key: 'coordinate',
-      dataIndex: 'coordinate'
-    }
-  ]
-  const chessArr = step === 0 ? new Array(9).fill(null) : record[step - 1].records;
-
+  const chessArr = records[step];
   return (
-    <div className={styles.container}>
+    <div className={styles.board}>
       <div className={styles.normal}>
         <div className={styles.header}>the next player is: {playerValue}</div>
         <div>{chessArr.slice(0, 3).map((item, index) => mapSquare(item, index, 0))}</div>
@@ -151,9 +71,6 @@ function Container({ dispatch, con }) {
         <Button onClick={() => reset()}>重新开始</Button>
         <div>the winner is: {winner}</div>
       </div>
-      <div className={styles.table}>
-        <RecordTable column={column} data={record} />
-      </div>
     </div>
   );
 }
@@ -161,4 +78,4 @@ function Container({ dispatch, con }) {
 // IndexPage.propTypes = {
 // };
 
-export default connect(({ con }) => ({ con }))(Container);
+export default connect(({ con }) => ({ con }))(Board);

src/routes/Index.jsx

+import React from 'react';
+import { connect } from 'dva';
+import Board from './Board';
+import styles from './board.css';
+import { Button } from 'antd';
+import RecordTable from '../components/RecordTable';
+
+
+const Index = ({ dispatch, con }) => {
+    const { coordinate } = con;
+    const recall = (records, index) => {
+        let next = index % 2 === 0 ? 'o' : 'x';
+        dispatch({
+            type: 'con/goBack',
+            payload: {
+                step: index + 1,
+                playerValue: next
+            }
+        })
+    }
+    const column = [
+        {
+            title: '步数',
+            key: 'step',
+            dataIndex: 'step',
+            render: (text, records, index) => <Button className={styles.step} onClick={() => recall(records, index)}>{text}</Button>
+        },
+        {
+            title: '坐标',
+            key: 'coordinate',
+            dataIndex: 'coordinate'
+        }
+    ]
+    return (
+        <div style={{width: '100%',display: 'inline-block'}}>
+            <Board />
+            <div className={styles.table}>
+                <RecordTable column={column} data={coordinate} />
+            </div>
+        </div>
+    )
+}
+export default connect(({ con }) => ({ con }))(Index)

src/routes/container.css → src/routes/board.css

-.container {
-  width: 100%;
+.board {
+  width: 50%;
   height: 400px;
+  display: inline-block;
 }
 
 .normal {