为什么使用Redux无法正确更改状态？

Question

I made a tic tac toe game, user vs computer. It works perfectly fine without the use of Redux, but ever since incorporating Redux into it, something's off.

What I'm trying to achieve is: If there's an empty square, then the CPU randomly place an O at an empty location (after the user places an X ) but this time using Redux.

I feel that let turnState = this.props.turnValueReducerRedux(this.state.turn); is what's causing the problem and/or my turnReducer.js file is incorrect.

I've labled // START HERE and // END HERE to indicate where I think the problem possibly stems from.

What am I doing wrong and how can I fix this?

Here's 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 = {
            winner: undefined,
        };

        this.gameState = {
            turn: 'X',
            gameLocked: false,
            gameEnded: false,
            board: Array(9).fill(''),
            totalMoves: 0
        }

        this.clicked = this.clicked.bind(this);
    }


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

        // START HERE 
        let turnState = this.props.turnValueReducerRedux(this.gameState.turn);

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

            this.gameState.turnState = this.gameState.turnState === 'X' ? 'O' : 'X';
            this.gameState.totalMoves++;
        }
        // END HERE

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

        var result = this.checkWinner();

        if(result === 'X') {
            this.gameState.gameEnded = true;
            this.setState({
                winner: 'X',
                winnerLine: 'X wins'
            });
            console.log("X wins");
        } else if(result === 'O') {
            this.gameState.gameEnded = true;
            this.setState({
                winner: 'O',
                winnerLine: 'O wins'
            });
            console.log("O wins");
        } else if(result === "draw") {
            this.gameState.gameEnded = true;
            this.setState({
               winner: 'draw',
               winnerLine: 'match is a draw'
            });
        }
        console.log("result ==> " + result);

        if(this.gameState.turnState === 'O' && !this.gameState.gameEnded) {
            this.gameState.gameLocked = true;

            setTimeout(() => {
                do {
                    var random = Math.floor(Math.random() * 9);
                } while(this.gameState.board[random] !== '');

                this.gameState.gameLocked = false;
                console.log("reached here");
                this.clicked(document.querySelectorAll('.square')[random]);
            }, 3000)
        }
    }

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

};

const mapDispatchToProps = dispatch => {
    return {
        turnValueReducerRedux: (value) => dispatch({type: actionTypes.TURN_VALUE, value})
    };
};

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

Here's turnReducer.js :

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

const initialValue = {
    turnValue: 'O'
};

const turnReducer = (state = initialValue, action) => {
    switch (action.type) {
        case actionTypes.TURN_VALUE:
            console.log("turnReducer ==> " + action.value);
            return {
                ...state,
                turnValue: action.value
            };
        default:
            return state;
    }
}

export default turnReducer;

Answer 1

I think the connected dispatch action ( turnValueReducerRedux ) will not return what you're expecting. It would return the full action ({ type: '...', value: ... }) , not just the value, which would mean turnState would be incorrect in the following code:

let turnState = this.props.turnValueReducerRedux(this.state.turn);

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

As a general recommendation, it seems you're not relying on state or the store for rendering the data, which one of Reacts main responsibilities. So you are setting the value in the store by dispatching the action, but never accessing it with this.state.turnValue , which is defined by the following code:

const mapStateToProps = state => {
    return {
        turnValue: state.turnValue
    };
};

Also be aware that gameState and state are very different, as the latter will trigger re-renders and be connected to the store, while the former will not.

---

UPDATE

---

As per our discussion below, here's an example that takes a different approach: https://codesandbox.io/s/x2x773pqxz

The automatic computer player is the complicated part as this is a side effect of an action by the human player. I therefore added redux-thunk to allow for certain actions to trigger other actions. I've put a delay on the computers turn so you can see it in action.

I've also split the Board and individual Squares into separate components, both of which are purely for presentation. The Game component and the redux/actions.js files are the most important.

In theory you could choose whatever board size and number of players you like, but the css is just set up for a 3x3 board.

I didn't implement the findWinner logic because it felt like too much effort 😅

Let me know if I can clarify anything, hope it helps!