Question

这是我制作蛇形游戏的减速机。基本上，每当我想重置游戏时，我都会将状态更新为INITIAL_STATE，如NEW_GAME所示，但每当MOVE_SNAKE触发时，它似乎都在修改INITIAL_STATE，所以我基本上将它传递给当前状态，而NEW_GAME什么也没做。

我添加了console.log(INITIAL_STATE.coords[0])来确认，并且只要蛇移动，INITIAL_STATE也会更新到当前状态。为什么是这样？我在一个tic tac toe游戏中做过类似的事情，但是现在它还没有用呢？

// REDUCER

const INITIAL_STATE = {
    coords: [
        [1, 0],
        [1, 1],
        [1, 2]
    ]
};

export default function(state = INITIAL_STATE, action) {
    console.log(INITIAL_STATE.coords[0]);
    switch(action.type) {
        case 'MOVE_SNAKE':
            return {
                ...state,
                coords: action.coords
            }

        case 'NEW_GAME':
            return INITIAL_STATE;
    }

    return state;
}

// ACTION CREATORS

export function moveSnake(snake) {
    let { coords, direction } = snake;
    let headCoords = coords[coords.length-1];
    let newHead = () => {
        if(direction === 'DOWN') return [headCoords[0], headCoords[1]+1];
        if(direction === 'UP') return [headCoords[0], headCoords[1]-1];
        if(direction === 'LEFT') return [headCoords[0]-1, headCoords[1]];
        if(direction === 'RIGHT') return [headCoords[0]+1, headCoords[1]];
    };
    coords.push(newHead());
    coords.shift();

    return {
        type: 'MOVE_SNAKE',
        coords
    }
}

// COMPONENT CALL LOOKS LIKE THIS

this.props.moveSnake(this.props.snake);

我已尝试在所有内容上使用Object.assign()，但仍然在弄乱INITIAL_STATE。

Answer 1

您改变状态Object.assign()是好的，但在使用数组时，您应该使用concat，slice和filter！

让我们说你有一个数组

let a = {name:"bob", things: [1,2,4]}
let b = Object.assign({}, a, {name: "joe"})

在上面的示例中，您可能认为b独立于a，但如果我们执行b.things.push(3)之类的操作，您会看到a.things变！要停止此操作，请确保您使用slice这样b.things = a.things.slice()。希望这清除了它;）

现在，您的代码很难弄清楚，但是您知道自己在哪里工作并分配数组，因此请确保您同时使用slice() ，不仅Object.assign()。

Redux改变了我的初始状态

1 个答案: