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

Question

Im using Immutable.js to try to add objects into lists that are nested in an object. Ive been able to get my first function handleRecieveLeads() to work to set the leads passed in. My second function handleSaveLeads() is not working properly.

From what I can see so far by logging things out is that the new item that is being pushed into that Immutable List is being over written. So when I log it to the console you only see the last item that was pushed and the one that was there before is gone. Heres a link to 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); 

Answer 1

Several things going on here. First you never return the new 'modified' states from your handlers.

Second, state.savedLeads is always undefined. Use state.get('savedLeads') instead

Third, when you use state.get('savedLeads') and push the new item you want to set it in the state and return the new state from that.

Here, try this:

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