Immutable.js - 将值添加/更新到嵌套在地图中的列表中

时间:2015-10-23 13:43:02

标签: javascript nested immutable.js immutablelist

我使用Immutable.js尝试将对象添加到嵌套在对象中的列表中。我已经能够使用我的第一个函数handleRecieveLeads()来设置传入的引导。我的第二个函数handleSaveLeads()无法正常工作。

从目前为止我所看到的东西是通过记录出来的东西是被推入不可变列表的新项目正在被覆盖。因此,当我将其记录到控制台时,您只能看到推送的最后一个项目,之前的项目已经消失。下面是JS Bin的链接:https://jsbin.com/fugajofaxi/edit?js,console



//Initial state
var state = Immutable.Map();

//sample lead
var leads = [{document_id: "L4234234234234",
              company_name: "someComp",
              date_filed:"083815",
              address:"11111 sw 123 ave",
              first_name: "john",
              last_name: "doe"
             },
             {document_id: "L11111111",
              company_name: "CorpComp",
              date_filed:"091919", 
              address:"22222 sw 456 Ave",
              first_name: "jane",
              last_name: "doe"
             }];

//Adds the new leads to the state
function handleRecieveLeads (state, leads) {
    var newState = state.set('leads', Immutable.List(leads));
    return console.log(newState.toJS());
}

handleRecieveLeads(state, leads);

//sample lead to save
var saveLeads = [{document_id: "L1919191919",
                  company_name: "someComp2",
                  date_filed:"083815",
                  address:"33333 SW 333rd Ave",
                  first_name: "dallas",
                  last_name: "thomas"
                 }];

//add leads to the savedLeads
function handleSaveLead (state, lead) {
    if(!state.savedLeads) {
        var newState = state.set('savedLeads', Immutable.List(lead));
        return console.log(newState.toJS());
    } else {
        var newState2 = state.get('savedLeads').push(lead);
        return console.log(newState2.toJS());
    }
}
//sample lead to save 2
var saveLeads2 = [{document_id: "L16161616",
                   company_name: "someComp3",
                   date_filed:"083815",
                   address:"444444 sw 555 Ave",
                   first_name: "crystal",
                   last_name: "mentos"
                  }];

handleSaveLead(state, saveLeads);

//setting a new initial state
var state2 = Immutable.fromJS({leads:leads, savedLeads: saveLeads});

handleSaveLead(state2, saveLeads2);




1 个答案:

答案 0 :(得分:0)

这里发生了几件事。 首先,您永远不会从处理程序返回新的“已修改”状态。

其次,state.savedLeads始终未定义。请改用state.get('savedLeads')

第三,当您使用state.get('savedLeads')并推送新项目时,您希望将其设置为状态并从中返回新状态。

在这里,试试这个:

//Initial state
var state = Immutable.Map();

//sample lead
var leads = [{document_id: "L4234234234234",
              company_name: "someComp",
              date_filed:"083815",
              address:"11111 sw 123 ave",
              first_name: "john",
              last_name: "doe"
             },
             {document_id: "L11111111",
              company_name: "CorpComp",
              date_filed:"091919", 
              address:"22222 sw 456 Ave",
              first_name: "jane",
              last_name: "doe"
             }];

//Adds the new leads to the state
function handleRecieveLeads (state, leads) {
    return state.set('leads', Immutable.List(leads));
}

var newState = handleRecieveLeads(state, leads);
console.log(newState.toJS())

//sample lead to save
var saveLeads = [{document_id: "L1919191919",
                  company_name: "someComp2",
                  date_filed:"083815",
                  address:"33333 SW 333rd Ave",
                  first_name: "dallas",
                  last_name: "thomas"
                 }];

//add leads to the savedLeads
function handleSaveLead (state, lead) {
    if(!state.get('savedLeads')) {
       return state.set('savedLeads', Immutable.List(lead));
    } else {
       var savedLeads = state.get('savedLeads');
       return state.set('savedLeads', savedLeads.push(lead));
    }
}
//sample lead to save 2
var saveLeads2 = [{document_id: "L16161616",
                   company_name: "someComp3",
                   date_filed:"083815",
                   address:"444444 sw 555 Ave",
                   first_name: "crystal",
                   last_name: "mentos"
                  }];

var newState2 = handleSaveLead(newState, saveLeads);
console.log(newState2.toJS())

var newState3 = handleSaveLead(newState2, saveLeads2);
console.log(newState3.toJS())