Как работает редукторный пользовательский редуктор с Thunk

Question

У меня есть некоторый опыт работы с React и Redux

Честно говоря, до сих пор я обычно просто копировал-вставлял код, не понимая, что происходит.

Я думал о том, как работает редуктор (при попытке использования Vuex), и это привело меня к следующему вопросу

 import {
        MEETUP_GROUP_DATA_SUCCESS,
        MEETUP_GROUP_DATA_LOADING,
        MEETUP_GROUP_DATA_ERROR,
        GOOGLE_PROFILE_LOGOUT
    } from "./../config/type.js"

const intialState = {
    meetupProfileData: null,
    meetupProfileLoading: null,
    meetupProfileError: null,  
}

export default function (state = intialState, action) {

    switch (action.type) {
        case MEETUP_GROUP_DATA_LOADING:
            return {
                ...state,
                meetupProfileLoading: true
            }
        case MEETUP_GROUP_DATA_SUCCESS: 
            return {
                ...state, 
                meetupProfileLoading: false, 
                meetupProfileError: false,
                meetupProfileData: action.payload,
            }
        case   MEETUP_GROUP_DATA_ERROR:
            return {
                ...state,
                meetupProfileLoading: false, 
                meetupProfileError: action.payload,
            }
        case  GOOGLE_PROFILE_LOGOUT: 
            return {
                ...state, 
                meetupProfileLoading: null, 
                meetupProfileError: null,
                meetupProfileData: null,
            }
        default:
            return state
    }

}

Здесь обратите внимание на наши const intitalState

Теперь предположим, чтодействие отправлено.Это заставит избыточный вызов вызывать эту функцию

export default function (state = intialState, action) {

Здесь наше состояние равно initialState .Так что каждый раз мы отправляем действие, наше состояние должно быть равным intialState?так как мы говорим state = intialState

Так какая польза от ...state здесь?Если вы собираетесь ответить, сказав, что создает копию предыдущего состояния , то, пожалуйста, укажите, каким образом наше состояние будет иметь копию предыдущего состояния, поскольку каждый раз, когда отправляется действие, наше состояние равно начальному состоянию инаше начальное состояние имеет все параметры как ноль

Answer 1

Параметр state = initialState означает, что state по умолчанию равно initialState, если оно не было предоставлено.Redux будет вызывать ваши редукторы один раз в начале, чтобы «инициализировать» ваше состояние, то есть он будет вызывать ваш редуктор с null или undefined.Поскольку в этом случае вы устанавливаете state на initialState и возвращаете его, Redux получит начальное состояние, которое вы установили.

Все последующие вызовы будут использовать новое состояние - так что, когда вашРедуктор получает действие, которое что-то изменит, вам нужно снова вернуть все состояние с соответствующими обновлениями.

Возвращение { ...state, somethingToUpdate: "foo" } означает, что вы по сути копируете переменную state в новый объект, перезаписываяКлавиша somethingToUpdate с "foo".

По сути, Redux вызывает только ваши редукторы, и если ваш редуктор получает действие, о котором он не заботится, ему необходимо вернуть текущее состояние.Если вы ничего не возвращаете (возможно, забыли добавить default: return state в коммутаторе), состояние снова получает undefined и будет сброшено до initialState из-за параметра по умолчанию, указанного в сигнатуре функции (state = initialState).

Answer 2

Этот оператор

export default function (state = intialState, action) { }

говорит, что инициализирует его с intialState в первый раз.

...state 

Похож на состояние копирования, и после этого мы меняем значения при возврате состояния / объекта.