Redux Reducer 不会设置布尔对象 属性
Redux Reducer won't set boolean object property
除了未设置的布尔变量外,我有 Redux reducer 可以工作。代码:
const GameBoardReducer = function(state, action) {
if( state === undefined ) {
let state = {
rows: BOARD_ROWS,
cols: BOARD_COLS,
width: Math.min( document.body.clientWidth * 0.9, 1184 ),
board: [],
running: false,
framesPerSec: 5,
}
for( var i=0 ; i<BOARD_ROWS ; i++ ) {
state.board.push([]);
for( var j=0 ; j<BOARD_COLS ; j++ ) {
state.board[i].push(Math.random()<0.15? FIELD_ALIVE: FIELD_DEAD);
}
}
return state;
}
switch(action.type) {
case SET_BOARD_ACTION:
return { ...state, board: action.payload };
case RUN_ACTION:
console.log("RunAction:", action.payload);
return { ...state, running: action.payload };
}
return state;
}
控制台显示
RunAction: true
但是容器中的值:this.props.gameBoard.running
仍然是假的。
为什么?
在您的笔中,您持有对 setInterval
中游戏板的引用并检查它是否是 运行,而不是检查 this.props 中的游戏板。试试这些改变:
this.state = {
interval: setInterval(() => this.calcNextGeneration(), ms)
};
calcNextGeneration() {
console.log("calcNextGeneration", this.props.gameBoard.running);
if( !this.props.gameBoard.running ) return;
...
除了未设置的布尔变量外,我有 Redux reducer 可以工作。代码:
const GameBoardReducer = function(state, action) {
if( state === undefined ) {
let state = {
rows: BOARD_ROWS,
cols: BOARD_COLS,
width: Math.min( document.body.clientWidth * 0.9, 1184 ),
board: [],
running: false,
framesPerSec: 5,
}
for( var i=0 ; i<BOARD_ROWS ; i++ ) {
state.board.push([]);
for( var j=0 ; j<BOARD_COLS ; j++ ) {
state.board[i].push(Math.random()<0.15? FIELD_ALIVE: FIELD_DEAD);
}
}
return state;
}
switch(action.type) {
case SET_BOARD_ACTION:
return { ...state, board: action.payload };
case RUN_ACTION:
console.log("RunAction:", action.payload);
return { ...state, running: action.payload };
}
return state;
}
控制台显示
RunAction: true
但是容器中的值:this.props.gameBoard.running
仍然是假的。
为什么?
在您的笔中,您持有对 setInterval
中游戏板的引用并检查它是否是 运行,而不是检查 this.props 中的游戏板。试试这些改变:
this.state = {
interval: setInterval(() => this.calcNextGeneration(), ms)
};
calcNextGeneration() {
console.log("calcNextGeneration", this.props.gameBoard.running);
if( !this.props.gameBoard.running ) return;
...