更新后,Redux状态返回undefined

时间:2016-07-17 15:01:16

标签: javascript redux

我有一个简单的减速器状态,工作正常。 M减速机在下面。

const initialState  =
{
plan: [
    {
       id: 0,
       text: 'Submit math assignment at noon.',
       completed: false
    }
]
}
function mytodo(state = initialState, type) {
    switch(type) {
        ...
        default: 
            return state;    
    }
}

我的应用运行正常。然后将一些本地存储数据连接到我的州。我的状态现在返回undefined。

const storageItems = JSON.parse(localStorage.getItem('plan'));

 function mytodo(state = initialState, type) {
        switch(type) {
            ...
            default: 
                console.log('the storage data is', storageItems);
                return storageItems ? state.plan.concat(storageItems) : state;    
        }
    }

我确认上面的存储项目有数据但我的reducer返回未定义为我的组件的计划。然后我把它改成了。

const storageItems = JSON.parse(localStorage.getItem('plan'));
if(storageItems) {
    initialState = initialState.todos.concat(storageItems);
    console.log('the states are', initialState);
}

function mytodo(state = initialState, type) {
        switch(type) {
            ...
            default: 
                return state;    
        }
    }

并将initialState更改为let。它仍然返回undefined。上面控制台的初始状态返回我需要的完整结果。但是,如果我更新initialState,它不会将值返回到我的组件。请问我做错了什么?我该如何解决这个问题?任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

Array.prototype.concat()返回一个新的数组对象https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/concat。检查引发错误的位置。对象可能不是空的,但订单可能已更改。

const initialState  =
{
plan: [
    {
       id: 0,
       text: 'Submit math assignment at noon.',
       completed: false
    }
]
}

从上面看,initialState.plan应该返回你的计划数组。

然而,

initialState = initialState.todos.concat(storageItems);

会返回新数组。现在你的initialState将采用

形式
initialState = [{
           id: 0,
           text: 'Submit math assignment at noon.',
           completed: false
        }]

因此,如果你的state.plan任何地方都会抛出一个未定义的错误,因为你的状态已经改变了。希望这里关于concat https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/concat