Почему моя игра заканчивается, когда она не должна?

Question

Я использую избыточность для обработки, когда матч - ничья в моей игре в крестики-нолики.Если доска заполнена и победитель не определен, то матч должен быть ничьим.Но на данный момент матч называется ничьей, даже когда есть 3 X и 3 O.

Я считаю, что проблема связана с моим редуктором, основанным на выводе console.

Я пытаюсь проверить это if(this.props.totalMovesValueRedux(9)) {return "draw";}.Другими словами, если плата заполнена, она должна вернуть draw.

Если вы посмотрите на результат в console, [totalMovesReducer], переходе с 4 на 9,заканчивает игру и объявляет, что матч - ничья, чего не должно быть.

Я пытался

• if(this.props.totalMovesValue == 9) {return "draw"}, но когда я делаю это, и доска становитсяВ браузере происходит сбой, в результате чего приходится вручную выключать и снова включать ноутбук.

Что я делаю не так?

Вот Board.js:

import React, { Component } from 'react';
import './Board.css';
import { connect } from 'react-redux';
import * as actionTypes from '../../store/actions/actions';

class Board extends Component {
    constructor(props) {
        super(props);
        this.state = {
            turn: 'X',
            board: Array(9).fill(''),
            locked: false
        }
    }

    clicked(box) {
        if(this.props.gameEndedValue || this.state.locked) { // this.props.gameLockedValue
            return;
        }

        if(this.state.board[box.dataset.square] === '') {               
          this.state.board[box.dataset.square] = this.state.turn;
          box.innerText = this.state.turn;

          this.state.turn = this.state.turn === 'X' ? 'O' : 'X';
          this.props.totalMovesValueRedux(this.props.totalMovesValue);
        }

        let result = this.checkWinner();

        switch(result) {
            case 'X':
                this.props.gameEndedValueRedux(true);
                this.props.winnerValueRedux("X wins!");
                break;
            case 'O':
                this.props.gameEndedValueRedux(true);
                this.props.winnerValueRedux("O wins!");
                break;
            case 'draw':
                this.props.gameEndedValueRedux(true);
                this.props.winnerValueRedux("Match is a draw");
                break;
            default:
                break;
        }

        if(this.state.turn === 'O' && !this.props.gameEndedValue) {
           this.props.gameLockedValueRedux(true);
            setTimeout(() => {
                do {
                    var random = Math.floor(Math.random() * 9);
                } while(this.state.board[random] !== '');

                this.props.gameLockedValueRedux(false);
                this.clicked(document.querySelectorAll('.square')[random]);
            }, 1000)
        }
    }

    checkWinner() {
        let moves = [[0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], [0, 1, 2], [3, 4, 5], [6, 7, 8]];
        let board = this.state.board;

        for(let i = 0; i < moves.length; i++) {
            if(board[moves[i][0]] === board[moves[i][1]] && board[moves[i][1]] === board[moves[i][2]]) {
                return board[moves[i][0]];
            }
        }
// the problem is here
        console.log("this.props.totalMovesValue ==> " + this.props.totalMovesValue);
        if(this.props.totalMovesValueRedux(9)) {
            return "draw";
        }
   // the problem ends here
    }

    render() {
        return(
            <div id="game">
                <div id="state">{this.props.winnerValue}</div>

                <div id="head">
                    Tic Tac Toe
                </div>

                <div id="board" onClick={(e) => this.clicked(e.target)}>
                    <div className="square" data-square="0"></div>
                    <div className="square" data-square="1"></div>
                    <div className="square" data-square="2"></div>
                    <div className="square" data-square="3"></div>
                    <div className="square" data-square="4"></div>
                    <div className="square" data-square="5"></div>
                    <div className="square" data-square="6"></div>
                    <div className="square" data-square="7"></div>
                    <div className="square" data-square="8"></div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        winnerValue: state.winnerValue.winnerValue,
        gameLockedValue: state.gameLockedValue.gameLockedValue,
        gameEndedValue: state.gameEndedValue.gameEndedValue,
        totalMovesValue: state.totalMovesValue.totalMovesValue

    };
};

const mapDispatchToProps = dispatch => {
    return {
        winnerValueRedux: (value) => dispatch({type: actionTypes.WINNER_VALUE, value}),
        gameLockedValueRedux: (value) => dispatch({type: actionTypes.GAME_LOCKED_VALUE, value}),
        gameEndedValueRedux: (value) => dispatch({type: actionTypes.GAME_ENDED_VALUE, value}),
        totalMovesValueRedux: (value) => dispatch({type: actionTypes.TOTAL_MOVES_VALUE, value})
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Board);

Вот totalMovesReducer

import * as actionTypes from '../actions/actions';

const initialState = {
    totalMovesValue: 0
};

const totalMovesReducer = (state = initialState, action) => {
    switch(action.type) {
        case actionTypes.TOTAL_MOVES_VALUE:
            console.log("[totalMovesReducer] ==> " + action.value);
            return {
                ...state,
                totalMovesValue: state.totalMovesValue + 1
            };

        default:
            return state;

    }
};

export default totalMovesReducer;

Вывод в console:

[totalMovesReducer] ==> 0
[gameLockedReducer] ==> true
[gameLockedReducer] ==> false
[totalMovesReducer] ==> 1
[totalMovesReducer] ==> 2
[gameLockedReducer] ==> true
[gameLockedReducer] ==> false
[totalMovesReducer] ==> 3
[totalMovesReducer] ==> 4
this.props.totalMovesValue ==> 4
[totalMovesReducer] ==> 9
[gameEndedReducer] ==> true
[winnerReducer] => Match is a draw
[gameLockedReducer] ==> true
[gameLockedReducer] ==> false