react redux- updating state - reactjs

Question

I need a help with updating user state.I register a user with name, email and password. Then in the profile page i want to give a chance to update(or create new) values like City and Country. And now im confused. My Redux action
export const updateUser=(profileId, updatedUser)=>async(dispatch)=>{
try {
const {data}= await api.updateUser(profileId,updatedUser)
dispatch({type: UPDATE_USER, payload: data})
} catch (error) {
console.log(error.message);
}
Reducer:
const initialState = {
users: [
{
city: "", country: "", email: "", name: "",
password: "",
_id: "",
},
],
};
const user = (state = initialState, action) => {
switch (action.type) {
case GET_ONE_USER:
return {
...state,
users: action.payload,
};
case UPDATE_USER:
return { ...state, users: action.payload };
default:
return state;
}
};
API:
export const updateUser=(profileId, updatedUser)=>API.patch(`/user/${profileId}`, updatedUser)
route:
router.patch('/:profileId',updateUser)
controller:
export const updateUser = async (req,res)=>{
const {id} = req.params
const {city, country} = req.body
const updatedUser={city, country}
try {
await User.findByIdAndUpdate(id,updatedUser, {new: true} )
res.status(200).json(updatedUser)
} catch (error) {
res.status(400).json({message: 'Blad'})
}
}
In my component:
const{ users} = useSelector((state)=>state.users)
and submit handler const handleSubmit =(e) =>{ e.preventDefault() dispatch(updateUser(users._id, data)) }
When i click button and dispatch an action, it only changes new values, all other are removed. I think that has something to do with my return state from reducer?
EDIT:
Ok, somehow i fixed this, although i think i could simplify the code?
case UPDATE_USER:
return { ...state, users: {...state.users, city:action.payload.city, country:action.payload.country}};
default:
return state;

Answer 1

You are updating state in a wrong way. You are replacing state with the new payload only. What you have to do is you have to keep previous state data and then add new payload that you are getting.
switch (action.type) {
.....
case UPDATE_USER:
return { ...state, users: [...state.users, action.payload] };
default:
return state;
}
};