Действие изменяет состояние всех значений, а не только отдельных

Question

Я пытаюсь переписать свое приложение (приложение для проверки погоды) из стандартного подхода React State в Redux.Я столкнулся с проблемой изменения состояния.В чистом React при помощи this.setState () я менял только тот фрагмент, который передавал в качестве аргумента в этом методе.В Redux кажется, что он изменяет весь объект состояния, хотя я передаю только часть всего состояния, но, вероятно, я делаю что-то не так.

Здесь вы можете увидеть, как состояние преобразуется, когда я запускаю свое действие:

В моем примере я пытаюсь установить состояния координат (широта и долгота) при нажатии кнопки.Пробовал несколько вещей - я подумал, что, возможно, передача state = [] в функции редуктора очищает все состояние, но я не могу избавиться от него при сбое приложения.

У меня есть 3 редуктора: первый для координат геолокации, второй дляСведения о погоде и последний для обработки загрузки счетчика должны отображаться или нет

const reducers = combineReducers({
    weather: weatherReducer,
    coords: coordsReducer,
    loading: loadingReducer
})

Тогда я сохраняю с начальными состояниями следующим образом:

const store = createStore(reducers, {
    weather: [{ temperature: "", humidity: "", windSpeed: "", pressure: "", pollution: "", date: "" }],
    coords: { lat: null, lng: null },
    loading: { loading: false }
}, allStoreEnhancers);

Не уверен, если разделить их все на 3части это хорошо, но я верю в это (не стесняйтесь указывать, если я ошибаюсь)

ordinsReducer.js:

export default function weatherReducer(state = [], { type, payload }) {
    switch (type) {
        case 'updateCoords':
            return payload
        case 'clearCoords':
            return payload
        default:
            return state
    }
}

и corresActions.js (просто установите координаты или удалите их)

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
        }
    }
}

В основном мне нужно несколько вещей: 1. Мнение, если способ, которым я разделил свое состояние и действие и редукторы, имеет смысл 2. Как изменить состояние отдельных свойств вместо изменения всего объекта состояния?

Answer 1

Это потому, что вы должны перейти в предыдущее состояние при настройке новых свойств.Вы можете сделать это легко с оператором распространения.

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
    }
}

, и вы можете установить значения, которые вы хотите обновить индивидуально.