Question

我是react.js的初学者。我正在制作一个棋盘游戏作为初学者项目。有一个滚动骰子的组件。掷骰子时，将调度一个动作，以便更改状态以反映该掷骰子的值。但在reducer中，state和action.data的值都是相同的。怎么可能？

我有一个骰子滚动组件，它返回：

return (
            <div>
                <button
                onClick={this.rollDice.bind(this)}
                >
                    Roll dice!
                </button>

                <TurnDisplay dispatch={this.dispatch} />

                <BoardContainer dispatch={this.dispatch}  />
            </div>
        );

当您单击该按钮时，将调度一个操作，该操作应该通过在其中添加骰子值来更新状态。

rollDice(){
        console.log("this.props ||||| rollDice()", this.props);
        if(this.props.isDiceRolled){
            alert("Move the marker...");
            return;
        }
        this.props.dispatch({
            type: "ROLL_DICE",
            data: {
                dice: Math.ceil(Math.random() * 5),
                isDiceRolled: true
            }
        });
    }

在reducer中：

switch(action.type){

    .
    .
    .

    case "ROLL_DICE": {
        console.log("ROLL_DICE");
        console.log(state, action.data);
        const newTurn = Object.assign(state.currentTurn, action.data);
        return Object.assign(state, { currentTurn: newTurn });
    }
    default: {
        return state;
    }

}

Answer 1

使用Redux，在reducers中，每次必须返回一个新状态。所以不是这两行：

const newTurn = Object.assign(state.currentTurn, action.data);
return Object.assign(state, { currentTurn: newTurn });

你应该写这样的东西

const newTurn = Object.assign({}, state.currentTurn, action.data);
return Object.assign(
    {},
    state,
    { currentTurn: newTurn}
)

问题应该是Object.assign。在此处阅读更多内容：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

以某种方式在reducer中获得更新状态

1 个答案: