Action changes state of all values instead of just particular ones - reactjs

Question

I am trying to rewrite my application (weather check application) from standard React state approach into Redux based one. I encountered problem with changing state. In pure React by lanuching this.setState() I was changing only the piece I was passing as an argument in this method. In Redux it seems to change the entire state object even though I pass only part of the entire state, but probably I am doing something wrong.
Here you can see how state transforms when I trigger my action:
In my example I am trying to set coordinates states (lattitude and longtitude) when clicking the button. Tried several things - I thought that perhaps passing state = [] in reducer function clears out the entire state but I cannot get rid of it as application crashes.
I have 3 reducers: first for geolocation coords, second for weather details and last one for handling loading spinner to be displayed or not
const reducers = combineReducers({
weather: weatherReducer,
coords: coordsReducer,
loading: loadingReducer
})
Then I have store with initial states as following:
const store = createStore(reducers, {
weather: [{ temperature: "", humidity: "", windSpeed: "", pressure: "", pollution: "", date: "" }],
coords: { lat: null, lng: null },
loading: { loading: false }
}, allStoreEnhancers);
Not sure if splitting them all into 3 parts is good but I believe so (feel free to point out if I am wrong)
coordsReducer.js:
export default function weatherReducer(state = [], { type, payload }) {
switch (type) {
case 'updateCoords':
return payload
case 'clearCoords':
return payload
default:
return state
}
}
and coordsActions.js (simply set coords or clear them out)
export function updateCoords(lat = 0, lng = 0) {
return {
type: 'updateCoords',
payload: {
lat: lat,
lng: lng
}
}
}
export function clearCoords() {
return {
type: 'clearCoords',
payload: {
lat: null,
lng: null
}
}
}
Basically I need few things:
1. Opinion if the way I splitted my state and action and reducers makes sense
2. How to change state of single properties instead of changing entire state object?

Answer 1

This is because you have to pass in the previous state when you are setting new properties. You can do this easily with the spread operator.
export default function weatherReducer(state = [], { type, payload }) {
switch (type) {
case 'updateCoords':
return {
...state,
lat: payload.lat,
lng: payload. lng
}
case 'clearCoords':
return {
...state,
lat: null,
lng: null
}
default:
return state
}
}
and you can set the values you want to update individually.