Currently utilizing React, Redux, and Immutable. I have a question about merging a plain JavaScript object into an Immutable Map object.
Importing Immutable.js:
import { List as iList,
Map as iMap } from "immutable";
The content of action.payload:
{
Preview : {
tabClass : "tabPreview tab activeTab"
},
Body : {
tabClass : "tabBody tab"
},
Sleeve : {
tabClass : "tabSleeve tab"
}
};
This is the InitialTabState created using 'Immutable.js':
const initialTabState = iList.of(
iMap({
tabClass : "tabPreview tab activeTab",
tabName : "Preview"
}),
iMap({
tabClass : "tabBody tab",
tabName : "Body"
}),
iMap({
tabClass : "tabSleeve tab",
tabName : "Sleeve"
})
);
The reducer function responsible for merging the action.payload with the InitialTabState above:
const tabsState = (state = initialTabState, action) => {
let payload = action.payload;
switch(action.type) {
case(ENABLE_TAB):
return (
state.map((obj) => {
let curObjName = obj.get("tabName");
return (
obj.merge(payload[curObjName]["tabName"])
);
})
);
...
};
Despite implementing this, there are no visible changes. No errors occur, and the output object remains identical to InitialTabState. The expected change in the tabClass property does not reflect as intended after applying the merge function from Immutable.js.