React 18: Handling deep nested state updates in useReducer with complex objects
I'm trying to implement I've encountered a strange issue with I'm working with a scenario when trying to update deeply nested state values using `useReducer` in React 18..... I have a complex state structure representing a form with multiple sections, each containing various fields. When I attempt to update a specific nested field, the entire state seems to be getting reset, leading to loss of other unsaved changes. Here's an example of my state structure: ```javascript const initialState = { user: { name: '', details: { age: 0, address: { street: '', city: '' } } } }; ``` I set up my reducer like this: ```javascript const reducer = (state, action) => { switch (action.type) { case 'UPDATE_FIELD': return { ...state, [action.field]: action.value }; default: return state; } }; ``` When I dispatch an action to update a nested field like so: ```javascript dispatch({ type: 'UPDATE_FIELD', field: 'user.details.address.city', value: 'New York' }); ``` I receive the following console behavior: `want to read properties of undefined (reading 'details')` which suggests my spread operator isn't targeting the nested structure correctly. I've tried different approaches with optional chaining and restructuring the reducer without success. What’s the right way to handle updates for deeply nested states in `useReducer`? Should I flatten my state structure, or is there a better practice to manage updates without losing other state values? Any guidance or code examples would be greatly appreciated! For reference, this is a production service. How would you solve this?