为什么我的Redux更改状态根本不会更改？

Question

为了查看Redux是否正常运行，在checkWinner()我正在检查console.log("win value (is redux working?) ==> " + win); 输出总是：

win value (does redux work?) ==> [object Object]

输出应该是win value (does redux work?) ==> X可以win value (does redux work?) ==> X 我的减速机写错了吗？

这是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
        }
    }

    clicked(box) {
        if(this.gameState.gameEnded || this.gameState.gameLocked) {
            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();

        // my attempt
        if(result === 'X') {
            this.gameState.gameEnded = true;
            let win = this.props.winnerValueRedux(this.state.winner);
            this.setState({
                winner: win,
                winnerLine: 'X wins'
            });
            console.log("win value (is redux working?) ==> " + win);
            console.log("X wins");
        // end of attempt

        } 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.turn === '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 {
        winnerValue: state.winnerValue
    };
};

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


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

这是winnerReducer.js ：

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

const initialState = {
    winnerValue: undefined
};

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

export default winnerReducer;

Answer 1

调用以下代码后：

let win = this.props.winnerValueRedux(this.state.winner);
console.log("win value (is redux working?) ==> " + win);

结果是：

win value (does redux work?) ==> [object Object]

使用JSON.stringify() ，我发现[object Object]是{"type":"WINNER_VALUE"}实际上是调度的操作 ，我们没有看到此操作中存在value属性，因为它的值未定义 。

和你的问题：

输出应该是win值（redux是否起作用？）==>X。我的Reducer写错了吗？

一切都很好，没有错。 错误的事情是关于我们期望win变量的值应该如何。

let win = this.props.winnerValueRedux(this.state.winner)

等效于：

function winnerValueRedux(value){
   return dispatch({type: actionTypes.WINNER_VALUE, value})
}

let win = winnerValueRedux(value);

并且，这是关键， dispatch(action)方法的返回值是作为对象的调度动作 。 这就是为什么您收到： win value (does redux work?) ==> [object Object]

有关更多信息： dispatch（action）

---

目前，我们了解了为什么收到了意外结果。

下一部分是检查我们的redux商店是否工作。

我已经检查过了，而且效果很好。 这是演示： https : //codesandbox.io/s/6xlv5rvqqk

这是我用来将操作分派到redux存储的代码：

if (result === "X") {
  this.gameState.gameEnded = true;
  this.props.winnerValueRedux("X");   //dispatch an action
} else if (result === "O") {
  this.gameState.gameEnded = true;
  this.props.winnerValueRedux("O");   //dispatch an action
} else if (result === "draw") {
  this.gameState.gameEnded = true;
  this.props.winnerValueRedux("draw");  //dispatch an action
}

这是我用来获取redux状态的代码

<div id="state">{this.props.winnerValue}</div>   // get value from redux store

---

我已经尽力了 希望有帮助。

Answer 2

传递错误或不更新（应该是winner ？）参数winnerValueRedux()是一个小问题。

主要问题是不理解“ redux流”：

分派器不返回值，它发出消息/动作。 减速器处理的动作正在更新商店中的状态。 更新后的值由mapStateToProps '返回'组件。

搜索一些教程/示例。