Redux改变了我的初始状态

时间:2017-01-20 22:11:53

标签: reactjs redux

这是我制作蛇形游戏的减速机。基本上,每当我想重置游戏时,我都会将状态更新为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

1 个答案:

答案 0 :(得分:2)

您改变状态Object.assign()是好的,但在使用数组时,您应该使用concatslicefilter

让我们说你有一个数组

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()