CODEWITHSUNDEEP
reactjsreduxaxios
tcoulson
tcoulson

Reputation: 624

Add to existing state within redux

What I am asking today is more of an expander than a reducer. So I have data at the moment:

[{"id":4729853,"MatItemKey":202029, "LongDesc":"2R Basket Label"},{"id":4729854,"MatItemKey":57561, "LongDesc":"Red Empty Basket Replacements"},
{"id":4729855,"MatItemKey":194135,"LongDesc":"BTS NOT REQUIRED"},{"id":4729856,"MatItemKey":210965,"LongDesc":"Heidi Heckelbeck Gets the Sniffles"},
{"id":4729857,"MatItemKey":132594,"LongDesc":"World's Longest Toenail, The"}]

But what I actually want to do for the list is expand it through my api, so call each id, get more data and fill each item with more details. Is there anything with redux to keep the current data structure, but add on any details from each call through axios to append the data? So far all of my calls have been getting new data, so the reducer basically just gets the data from axios and puts it in the store. But I was not sure what a pattern would be to add to existing state? Thanks in advance.

Upvotes: 0

Views: 747

Answers (2)

tcoulson
tcoulson

Reputation: 624

I have figured out a way to do it. It uses nothing on my action-creator. I am just passing the individual data for my axios call, for an individual item. Then in my reducer I have the following code that updates my state:

case UPDATE_BOOK:
    let newVals = state.map((item)=>{
        if(item.MatItemKey === action.meta.book.MatItemKey){
            return update(item, {$merge: action.payload.data})

        }else{
            return item
        }
    });
    console.log(newVals);
    return newVals

So with the immutability-helper I was able to update my data, using anything that was called to the state using axios. Thanks all for your suggestions, they all helped.

Upvotes: 0

bolan
bolan

Reputation: 79

You can pass the list from your state to the method that has the axios call. In the axios success callback, you can then map the list and append whatever data you want to add from the API. Using Array.prototype.map will create a new array. Then pass that new array as payload to your reducer.

Upvotes: 1

Related Questions