Почему 1-й редуктор принимает значение 2-го редуктора после завершения программы?

Question

У меня есть 2 редуктора: winnerReducer и gameLockedReducer.Последние 2 строки в console показывают, что gameLockedReducer взяла значение (X wins!) из winnerReducer.Работает нормально, так, как и предполагалось, вплоть до вышеупомянутых двух последних строк.

Я имею в виду, они оба явно находятся в двух разных начальных состояниях, как вообще возможно, что это происходит?

Если требуется дополнительная информация, пожалуйста, дайте мне знать.

Вот результат в console:

gameLockedReducer.js:8 [gameLockedReducer] ==> undefined
gameLockedReducer.js:8 [gameLockedReducer] ==> undefined
gameLockedReducer.js:8 [gameLockedReducer] ==> undefined
Board.js:31 this.gameState.totalMoves ==> 1
gameLockedReducer.js:8 [gameLockedReducer] ==> true
gameLockedReducer.js:8 [gameLockedReducer] ==> false
Board.js:31 this.gameState.totalMoves ==> 2
Board.js:31 this.gameState.totalMoves ==> 3
gameLockedReducer.js:8 [gameLockedReducer] ==> true
gameLockedReducer.js:8 [gameLockedReducer] ==> false
Board.js:31 this.gameState.totalMoves ==> 4
Board.js:31 this.gameState.totalMoves ==> 5
gameLockedReducer.js:8 [gameLockedReducer] ==> true
gameLockedReducer.js:8 [gameLockedReducer] ==> false
Board.js:31 this.gameState.totalMoves ==> 6
Board.js:78 6
Board.js:31 this.gameState.totalMoves ==> 7
winnerReducer.js:10 [winnerReducer] => X wins!
gameLockedReducer.js:8 [gameLockedReducer] ==> X wins!

Вот

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.gameState = {
            turn: 'X',
            gameLocked: false,
            gameEnded: false,
            board: Array(9).fill(''),
            totalMoves: 0
        }
    }

    clicked(box) {
        if(this.gameState.gameEnded || this.props.gameLockedValue) {
            return;
        }

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

            this.gameState.turn = this.gameState.turn === 'X' ? 'O' : 'X';
            this.gameState.totalMoves++;
        }

        console.log("this.gameState.totalMoves ==> " + this.gameState.totalMoves);

        var result = this.checkWinner();

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

        // console.log("result ==> " + result);

        if(this.gameState.turn === 'O' && !this.gameState.gameEnded) {
            this.props.gameLockedValueRedux(true);
            // this.gameState.gameLocked = true;
            setTimeout(() => {
                do {
                    var random = Math.floor(Math.random() * 9);
                } while(this.gameState.board[random] !== '');
                this.props.gameLockedValueRedux(false);
                // console.log("reached here");
                this.clicked(document.querySelectorAll('.square')[random]);
            }, 3000)
        }
    }

    render() {
        return(
            <div id="game">
                <div id="state">{this.props.winnerValue} {this.props.gameLockedValue}</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
    };
};

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


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

Вот winnerReducer:

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

const initialState = {
    winnerValue: ""
};

const winnerReducer = (state = initialState, action) => {
    switch(action.type) {
        case actionTypes.WINNER_VALUE:
            console.log("[winnerReducer] => " + action.value);
            return{
                ...state,
                winnerValue: action.value
            };
        default:
            return state;
    }
}

export default winnerReducer;

Вот gameLockedReducer:

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

const initialState = {
    gameLockedValue: false
};

const gameLockedReducer = (state = initialState, action) => {
    console.log("[gameLockedReducer] ==> " + action.value);
    switch(action) {

        case actionTypes.GAME_LOCKED_VALUE:

            return {
                ...state,
                gameLockedValue: true
            };
        default:
            return state;
    }
};

export default gameLockedReducer;

Answer 1

Проблема здесь с console.log в игре LockedReducer.По умолчанию все действия передаются в редуктор.В зависимости от actionType вы изменяете состояние.В случае gameLockedReducer, журнал консоли печатается, поскольку он также получает диспетчеризацию, но он фактически не меняет состояние, так как в редукторе не выполняется ни один случай переключения.Если вы поместите тот же консольный журнал в случае actionTypes.GAME_LOCKED_VALUE, вы должны получить правильное поведение при регистрации, как вы ожидаете.Надеюсь, это поможет.