👀 Views: 10 💬 Answers: 1 📅 Created: 2025-06-12

react usestate usereducer JavaScript

Could someone explain I'm stuck on something that should probably be simple. I recently switched to I'm having trouble managing state updates in my React application using `useReducer`... I'm trying to update a nested object in my state, but it seems like my changes aren't being reflected correctly. Here’s a simplified version of what I have: ```javascript import React, { useReducer } from 'react'; const initialState = { user: { name: '', age: 0, address: { street: '', city: '' } } }; function reducer(state, action) { switch (action.type) { case 'SET_NAME': return { ...state, user: { ...state.user, name: action.payload } }; case 'SET_ADDRESS': return { ...state, user: { ...state.user, address: { ...state.user.address, ...action.payload } } }; default: return state; } } const App = () => { const [state, dispatch] = useReducer(reducer, initialState); const updateName = (newName) => { dispatch({ type: 'SET_NAME', payload: newName }); }; const updateAddress = (newAddress) => { dispatch({ type: 'SET_ADDRESS', payload: newAddress }); }; return ( <div> <h1>{state.user.name}</h1> <button onClick={() => updateName('John Doe')}>Set Name</button> <button onClick={() => updateAddress({ street: '123 Main St', city: 'Springfield' })}>Set Address</button> </div> ); }; export default App; ``` When I click the "Set Name" button, the name updates correctly. However, when I try to update the address, it seems like the state is not updating as expected. After dispatching the `SET_ADDRESS` action, the address fields don't reflect the new values. In the console, I see no errors, but logging `state.user.address` after the update shows the previous values instead of the new ones. I’ve also tried using `console.log` in the reducer to see if it's being called correctly, and it is. The question seems to lie in how I'm spreading the state. Any ideas on what I might be missing? I'm using React 18.0.0. This is part of a larger application I'm building. Any help would be greatly appreciated! The stack includes Javascript and several other technologies. This is part of a larger mobile app I'm building. What am I doing wrong?