Updating a deeply nested state property: best practice #86
Replies: 1 comment 10 replies
-
|
Flattening the state structure might be good, but if you have multiple tables on a page, I wouldn't combine their states. I used to think Redux could be like a client-side database, but it's usually best to just fetch fresh data from an endpoint rather than worrying about precise updates in a normalized client state. Offline mode might be different. But this is somewhat beside the point of your question. If it's just convenience, you have to weight the pros and cons, such as losing the ability to expand state the way it probably expands in the UI, and instead having to match up IDs. The usual answer for nested state updates is interface AppState {
myObject: MyObjectType | null;
}
export const initialState: AppState = {
myObject: null;
};
export const adapter = joinAdapters<AppState>()({
myObject: createAdapter<MyObjectType | null>()({}),
})();This will create You could also create the inner adapter above to keep all the code organized by type. Deeply Nested ArraysAt this moment I have no idea how to handle this. Normally I need to come back to this. This might be the first scenario I've seen that turns out to really benefit from Immer over joinAdapters. But I need to think about it. In the meantime, take a look at One other pattern that might help is to create an array adapter creator: export function createArrayAdapter<T>() {
return createAdapter<T[]>()({
// ... reducers for arrays
});
}This is something StateAdapt should have soon. There's just been the entity adapter, but I imagine the issues with that would be worse with this. See this discussion: #81 But even with this many nested arrays, that might be awkward too. The state change function might be export const adapter = joinAdapters<State>()({
sections: sectionsAdapter,
})({
setCellValue: sectionsAdapter.setSubSectionsRowsCellsOneValue,
})();(Again see But if you're not doing much else, this is a lot of work for just one state change function. But the other issue would be the payload. The array adapter will automatically handle finding by id, so that needs to be separate from the payload. In the entity adapter, the overall action payload is like What are your thoughts on how Immer could be incorporated into StateAdapt? I'd prefer |
Beta Was this translation helpful? Give feedback.
-
|
yeah, i could not figure out how to join adapters to represent the deeper state. If i have a Its the array type that is causing the block for me. I can easily join adapters on sub types if that type is represented by a single entity. |
Beta Was this translation helpful? Give feedback.
-
|
i tried to use the entity adapter to solve this problem: const rowsAdapter = createAdapter<row[]>()({});
const segmentAdapter = joinAdapters<segment, 'index'>()({
title: baseStringAdapter,
isCollapsed: booleanAdapter,
rows: rowsAdapter,
});
const segmentEntityAdapter = createEntityAdapter<segment>()({});
const sectionAdapter = joinAdapters<section, 'index'>()({
title: baseStringAdapter,
isCollapsed: booleanAdapter,
segments: segmentEntityAdapter,
});But it throws an error on the
The problem is that I cannot assign the entity adapter to the array and that is the break point, we need a way to connect an adpater of array or entity adpater to the collection property of the object. |
Beta Was this translation helpful? Give feedback.
-
|
The entity adapter documentation could use a lot of improvement, but given how complex your state already is, it's probably not the best fit. So the part under "Deeply Nested Arrays" in this comment still applies. I wasn't sure what your paragraph about Immer was really about, but I just looked and saw that your Stack Overflow question was answered. Could you just use Immer for this? |
Beta Was this translation helpful? Give feedback.
-
|
Hi mike, The question was answered in the way that I posted it. However, immer cannot be used in this situation, at least I have not been able to yet. The main reason is that the object passing through the state stream is an object of Action and not Observable. So I am not able to "unwrap" the observable and pass a plain js object to immer which it requires. Immer sees the action payload as a complex object and not a simple object. Is there a way you can think of to "unwrap" the action payload into a plain object inside a rxjs stream? That would allow immer to be used, however I was largely able to perform my state mutations inside the adapter even if it was a bit complex. Immer would just clean up the code to be easier to read and maintain. On a side note, bubbling up the events through 4-5 layers of inputs and outputs is becoming quite cumbersome. I think I am leaning towards injecting the state service deeper into the nested components. The only draw back I am finding is that I use cypress component testing for TDD and having to handle the state service is making that aspect more complicated. |
Beta Was this translation helpful? Give feedback.
-
|
In a state adapter, you're receiving the action payload, not the action or an observable. And the payload is whatever you pass into the Source. Where are you trying to use Immer? I might be misunderstanding "Immer sees the action payload as a complex object" because the payload is coming from your code, not StateAdapt. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hello,
I am curious how others would approach this problem. Say you have a property of your store that is a complex object (represented to the user as a dynamic form):
example adapter:
It can be quite a complex bit of code to update the value of a "cell" or add a row to a subSection inside of myObject. I usually use immer's produce to accomplish this task. I am wondering if state adapt has something built in for this task.
Secondly, would it be better to have a store that "normalizes" the deep object into top level properties of sections, subsections, rows and use id's to compose the object back together when needed?
so the state for the object would look like:
and I would write a transform function/reducer to return the data in the nested structure:
Just looking for opinions on best practices in this scenario.
Thanks
Beta Was this translation helpful? Give feedback.
All reactions