React Redux不可改变的状态不被退回

我正在学习redux和不可变的，并做一个todo应用程序。React Redux不可改变的状态不被退回

当我触发动作方法add_item我得到 “state.push是不是一个函数”

如果我改变这一行

const reducer = (state = initialState, action) => {

到

const reducer = (state = new List(), action) => {

我可以添加新的项目，但原始的不显示，如何解决这个问题？

export const initialState = Map({ 
    items: List (
     Map({ id: 1, content: 'Call mum' }), 
     Map({ id: 2, content: 'Buy cat food' }), 
     Map({ id: 3, content: 'Water the plants' }) 
) 
}); 

const reducer = (state = initialState, action) => { 
    console.log("action.type", action.type); 
    switch (action.type) { 
    case ADD_ITEM: 
     return state.push(Map({ 
     id: nextId++, 
     content: action.content 
     })); 
    default: 
     return state; 
    } 
};

来源

2017-10-04 Adam

状态不是Array的一个实例，因此无法访问Array.push（）方法。国家是一个对象。

首先，我会避免使用任何突变方法，例如， push（），在你的reducer内。如果你必须使用它们，最好把你的行为定义好。

在这个例子中，我没有看到“List”或“Map”的效用。注重文字：

const initialState = { 
    items: [ 
      {id: 1, content: 'call mum'}, 
      {id: 2, content: 'call dad'}, 
    ], 
}

在你的减速机本身，我强烈建议像对象休息传播一样不可变的方法。

const reducer = (state = initialState, action) => { 
    switch(action.type){ 
    case "ADD_ITEM": 
     return {...state, items: [...state.items, action.newItem]} 
    } 

    ... 
}

如果你想养活你的初始状态，然后可以设置其他情况下，你的减速如下：

switch(action.type){ 
    case "ADD_ITEM": 
     return {...state, items: [...state.items, action.newItem]} 
    case "SET_NEW_LIST": 
     return {...state, items: action.newList} 
    ... 
    }

并相应地确定另一个动作。或多或少，丹·阿布拉莫夫和其他人鼓励尽可能简化你的减速器，并尽可能地将逻辑保留在你的行动中。您的ID增量应该在您的ADD_ITEM操作中处理。

来源

2017-10-04 21:33:56 jpmonroe8

谢谢你为你的答案，但我想使用immutablejs，如https://www.sitepoint.com/how-to-build-a-todo-app-using-react-redux-and-immutable-js/我是松散地跟随。以上只是我正在构建的测试应用程序的一小部分。将进一步的功能来切换，删除，过滤状态。 – Adam

您只需调整你的初始状态那样：

export const initialState = List ([ 
    Map({ id: 1, content: 'Call mum' }), 
    Map({ id: 2, content: 'Buy cat food' }), 
    Map({ id: 3, content: 'Water the plants' }) 
])

如果你想保持像Map{ items: List }你必须重构你的减速和你的状态更配合物结构：

export const initialState = Map({ 
    items: List ([ 
    //   ^don't forget the brackets here 
     Map({ id: 1, content: 'Call mum' }), 
     Map({ id: 2, content: 'Buy cat food' }), 
     Map({ id: 3, content: 'Water the plants' }) 
    ]) 
}); 

const reducer = (state = initialState, action) => { 
    switch (action.type) { 
    case ADD_ITEM: 
     return state.set('items', state.get('items').push(
     Map({ 
      id: nextId++, 
      content: action.content 
     }) 
    )); 
    default: 
     return state; 
    } 
};

来源

2017-10-04 22:05:50 Freez

React Redux不可改变的状态不被退回

回答

相关问题