score:2
so, what do you need here is nested update.
at first, you have to check your list of loadedaccounts whether it has this account or not.
secondly, you have to change activeaccount
field.
and, lastly, add (or update) account to loadedaccounts
.
the caveat here is how you pass account
property. if you derive it from somewhere and pass around as a record
, you can just compare by ===
(or by .equals()), but it seems that it is just a plain javascript object – i'll suppose it later.
in terms of code it would be something like:
// we can do it by different ways, it is just one of them
const listwithloadedaccounts = state.get('loadedaccounts');
const isaccountalready = boolean(
listwithloadedaccounts.filter(
account => account.get('id') === action.account.id
).size
);
const patchedstate = state.set('activeaccount', action.account.id);
return isaccountalready
? patchedstate.updatein(['loadedaccounts'], list => list.map(account => account.get('id') === account.action.id ? new account(action.account) : account))
: patchedstate.updatein(['loadedaccounts'], list => list.concat(new account(action.account)))
it is not the ideal code, something can be deduplicated, but you get the idea – always use deep merge / update if you need to change nested fields or data structures.
you also can set new field directly, like:
const oldlist = state.get('loadedaccounts');
const newlist = oldlist.concat(action.account);
const patchedstate = state.set('loadedaccounts', newlist);
but i personally find that it is not that flexible and also not consistent, because it is quite common operation to perform deep merge.
score:-1
since this is the top search result for what is in the title of the question
an example of how to add to a list using immutable.js:
let oldlist = list([ 1, 2, 3, 4 ])
let newlist = oldlist.push(5)
insert()
returns a new list with value at index with a size 1 more than this list. values at indices above index are shifted over by 1. insert(index: number, value: t): list discussion
this is synonymous with list.splice(index, 0, value).
list([ 0, 1, 2, 3, 4 ]).insert(6, 5)
// list [ 0, 1, 2, 3, 4, 5 ]
score:0
i hope this example will help, i am creating a new immutable list and first performing an update and then adding a new element. i am not passing the object which i want to replace with, but you can also pass your existing object, also in update method you have access to current item
class test {
a = null;
b = null;
constructor(a,b){
this.a=a;
this.b=b;
}
}
$("#test").html("");
function logme(item){
$("#test").append("<br/>"+json.stringify(item));
}
function logmenewline(){
$("#test").append("<br/>");
}
function listaddupadte(key){
var index= list.get('data').findindex(listing => {
return listing.a === key;
});
logme(' found index (-1 for not found) : ' + index);
if(index >= 0){
logme("upadte");
list = list.set("data",list.get("data").update(index,function(item){
return new test(key,"go");
}));
}else {
logme("add");
list = list.set("data",list.get("data").push(new test(key,"go")));
}
list.get('data').foreach(item=>{
logme(item);
});
}
var list = immutable.fromjs({
"data":[new test(6,"abhi"),new test(4,"raj"),new test(1,"ajay")]
});
logme("intial data");
list.get('data').foreach(item=>{
logme(item);
});
logmenewline();
logme("testing replace with a = 4 ")
logmenewline();
listaddupadte(4);
logmenewline();
logme("testing add with a = 8 ")
logmenewline();
listaddupadte(8);
logmenewline();
logmenewline();
logmenewline();
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.2/immutable.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>
Source: stackoverflow.com
Related Query
- How to update or add to immutable.js List
- How to update key value in immutable while filtering over List of Maps
- How to add a link to a List in material-ui 1.0?
- How to add new elements without re-rendering whole list with React
- How to add pagination to a long list using React MaterialUI?
- How to add components to list dynamically in React with no redundant render?
- How to add and remove add class for list in reactjs?
- How to deep update two values inside Immutable Js Map in redux?
- In React/Redux reducer, how can I update a string in an nested array in an immutable way?
- WebStorm: how to add jsx file type to 'File > New' list
- How to add className to list from map array depending on object value
- how to update dropdown list by clicking the update button in react
- How to add a list of global components in nextjs
- How to add list to list in Immutable.js?
- How to update list of items with Infinite scroll when new item added
- How to add a permanent filter function to a List view in react-admin?
- How to update value in a nested Immutable map
- Immutable JS - How to replace a list with a new list
- how to update nested array values in immutable way in reactjs
- React-select: How to add created items to options list
- How to update a list of books from another component that is a form?
- How do you incrementally update a list in React?
- How to handle form object in array to add list
- How to add each element in a list to a new row in React table
- How to add a string to a string list in a todo list react
- How can I update a value in mapped list without updating the list's siblings?
- How to add a filter in react-admin List populated by unique values within the list?
- React+Firebase: How to add item to list data into firebase realtime database
- How to write "if" condition in my loop getting syntax error and update a row in list
- How can i add a favorite item to a newly created list
More Query from same tag
- Uncaught TypeError: Cannot read property 'map' of undefined with React
- How to check Current version of React using command prompt
- React/Redux - how can I make a copy of deeply nested state?
- Local Storage values not getting loaded in React App
- Resetting Values in ReactDOM Ref children (Best Practices?)
- How to scroll messages to bottom on click on Send button in Chat App?
- how to get value after updating state in react
- onChange event for textarea instead of get value when needed
- React - proper state management for rows of unmounted JSX?
- How do I POST form data using Fetch and React?
- Unable to download excel file from asset/test.xlsx on IE and Edge browser
- How to update Baobab leaf data before React component render?
- How to simply CSS class with same properties except one property
- How to prevent user from entering letters into TextField using material ui
- Reactjs Show Dynamic Value
- how does promise and useState really work in React with AWS Amplify?
- Do I need to import React for stateless functional components?
- React.js - conditionally use dangerouslySetInnerHTML
- Any help to undefined parameter when I was going to pass the map index to my component
- How can i pass multiple arguments with different components?
- react bootstrap accordion dynamic data collapsing does not work
- how to get value of input tag in array with same attribute name in react js
- React not re-rendering when redux store changes
- Adding data in React component via websocket
- React: Render and link toggle button outside the class
- React Native & Android?
- How can I use state inside recompose's `withPropsOnChange` HOC?
- Pass react state to paypal button
- Not able to register through frontend. Keeps saying Bad Request
- React event handlers with Typescript and JSX