I'm working with React/Redux and want to use the same Promise result to set two different states. Here's my code:
useEffect(() => {
fetchData().then((resp) => {
Object.freeze(resp);
const var1 = resp[0];
const var2 = parseData(resp[0]);
props.setAction1(var1);
props.setAction2(var2);
});
}, []);
The content of resp is an array of dicts:
Array [ (95) […] ]
0: Array(95) [ {…}, {…}, {…}, … ]
0: Object { date: "6/1/11", open: 21.45673929 }
1: Object { date: "6/2/11", open: 21.02743338 }
2: Object { date: "6/3/11", open: 20.64964196 }
etc...
I know that in Javascript object are mutable, so I attempted to make resp immutable with Object.freeze(resp). var1 should be the result with string dates and var2 should be the result with date converted to Date objects with the parseData function, whose content is:
function parseData(data) {
data.map((x) => (x.date = new Date(x.date)));
return data;
}
My problem is that, when I run this function, var1 === var2. The parseData function affected not only var2 but also var1. I don't understand how this happens, especially as I froze the resp object. This is likely an issue with immutability, but I'm unsure where else to go.
Your parseData function currently returns the same array object, in which the objects were mutated. If you want your objects to be immutable, you should not have code like x.date =. Instead do this:
function parseData(data) {
return data.map((x) => ({...x, {date: new Date(x.date)} }) );
}
I don't believe Object.freeze(resp); will freeze nested objects. You could try the following, but I believe it is confusing to read.
useEffect(() => {
fetchData().then((resp) => {
Object.freeze(resp);
Object.freeze(resp[0]);
const var1 = resp[0];
const var2 = parseData(resp[0]);
props.setAction1(var1);
props.setAction2(var2);
});
}, []);
Alternatively, you could change your parseData function to return a copy using the spread operator:
function parseData(data) {
[...data].map((x) => (x.date = new Date(x.date)));
return data;
}
I don't think Object.freeze is what you're looking for. In the end, the objects still reference the same location in memory, even if they are frozen. You should make a copy of the data to separate the two so you can alter either of them without affecting the other one.
fetchData().then((resp) => {
const ref1 = resp;
/* Alternatively you can also use `Object.assign` */
const ref2 = [ ...resp ].map(obj => ({ ...obj }));
}
Like @JohnD mentioned, you can also do that in your parseData function which might be a little tidier. ;)