現在到了開始準備加入資料流的部分
先從圈圈叉叉開始設計 Actions
這個遊戲有三個主要的行為
第一個是根據點擊的位置
按照順序放入圈和叉兩種符號
這裡的重點在輪流這個行為
我設計透過一個狀態資料來記錄目前是哪一個符號
並且在放入符號之後
切換這個狀態成第二種圖案
藉由這種方式來區隔兩個使用者

// actions.js
export function putMark(X, Y){
    return {
        type : PUT_OX,
        x : X,
        y : Y
    }
}

在這裡我碰到一個問題
就是原先的假狀態是根據位置放了三個不同的屬性名稱（L, C, R）
不過這樣沒有任何資訊能夠對應到資料位置
所以可能需要調整
最直接的方式是透過陣列
對應點擊位置的資訊
所以 Action 這邊我先暫訂會傳遞位置資訊進來
另外
第二個行為是檢查是否有連線
這裡我打算透過一個isWinner來存取遊戲狀態
如果遊戲結束
這個狀態會記錄勝利者並透過組件顯示結果出來
主要目的是告訴 Reducer 要檢查有沒有連線這樣
所以這邊就只傳遞 action.type 啦

// actions.js
export function isGameEnd(){
    return{
        type : CHECK_WIN
    }
}

第三種是再玩一次
前面做外觀的時候忘了加上
所以這邊要去補上新遊戲的按鈕
與之對應的行為說白了就是把資料初始化這樣

// actions.js
export function playAgainOOXX(){
    return{
        type : OX_AGAIN
    }
}

接著是Reducer

import { combineReducers } from 'redux';
import { PUT_OX, CHECK_WIN, OX_AGAIN } from '../action.js';

const initialData = {
    playerMark : "O",
    OXgame:[
            ["","",""],["","",""],["","",""]
           ],
    isWinner:"",
}

function OXGame(state = initialData, action){
    switch(action.type){
        case PUT_OX:
            if(state.playerMark == "O"){
                return Object.assign({},state,{
                    // put mark inside,
                    playerMark : "X",
                });
            }else{
                return Object.assign({},state,{
                    // put mark inside,
                    playerMark : "O",
                });
            }
        case CHECK_WIN:
            // check if game is end 
            return 
            // check if game is not end 
            // return state
        case OX_AGAIN:
            return Object.assign({},state,{
                    playerMark : "O",
                    OXgame:[
                            ["","",""],["","",""],["","",""]
                           ],
                    isWinner:"",
                });
        default:
            return state;
    }
}

大致就是針對 Actions 修改狀態這樣
除了判斷位置相關的部分
一時卡住想不到實作方式
只能先這樣了
明天要突飛猛進！

成就清單

參考資料

1. tutorialspoint-ReactJS Tutorial
2. React 官方文件

>>> 隊友任意門 <<<

• Eva Vue.js 30天隨身包
• Ben那些年，我們一起錯過的Javascript
• Ray激戰ReactJS 30天

Day27 end
by 瑞Ray இдஇ