как состояние по умолчанию устанавливается в React?

Question

Я новичок в React / Redux, просто вопрос о состоянии по умолчанию. Я видел такой код:

const filtersReducerDefaultState = {
    text: 'Coffee',
    sortBy: 'date',

};

export default (state = filtersReducerDefaultState, action) => {
    switch (action.type) {
        case 'SET_TEXT_FILTER':
           return {...state, text:action.text};
        case 'Sort_BY_AMOUNT':
           return {...state, sortBy:'amount'};
        case 'Sort_BY_DATE':
           return {...state, sortBy:'date'};
        case 'SET_START_DATE':
           return {...state, startDate:action.startDate};
        case 'SET_END_DATE':
           return {...state, endDate:action.endDate};
        default:
           return state;
    }
};

and then use redux' s createSotre

Затем он попытался получить доступ к состоянию с помощью «подключения» в таком компоненте, как:

this.props.filter.text

Я не понимаю, как это работает, потому что состояние по умолчанию просто используется редуктором при генерации действия. Так как же он мог установить это состояние по умолчанию, не отправляя действие? Может кто-нибудь объяснить, как «filtersReducerDefaultState» устанавливается в качестве состояния по умолчанию без отправки действия

Answer 1

Redux вызывает редукторы с фиктивным действием для инициализации состояния. Вот как это значение по умолчанию для параметров состояния становится исходным состоянием.

Подробнее здесь :

Когда Redux инициализируется, он отправляет «фиктивное» действие, чтобы заполнить государство. Таким образом, ваш счетчик редуктор был вызван с состоянием, равным не определено.

Answer 2

Цитирование официальной документации Redux здесь

Существует два основных способа инициализации состояния для вашего приложения.Метод createStore может принять необязательное значение preloadedState в качестве второго аргумента.Редукторы также могут указывать начальное значение, просматривая входящий аргумент состояния, который не определен, и возвращая значение, которое они хотели бы использовать по умолчанию.Это можно сделать с помощью явной проверки внутри редуктора или с помощью синтаксиса значения аргумента по умолчанию в ES6: функция myReducer (state = someDefaultValue, action)

В опубликованной вами настройке используется 2-й метод:инициализация состояния редукции, которое является аргументом ES6 по умолчанию.С начальным действием, отправляемым Redux, редуктор получит state как undefined, а так как вы используете аргумент по умолчанию (т.е. (state = filtersReducerDefaultState) => ...), default регистр switch вернет filtersReducerDefaultState.

Answer 3

Состояние по умолчанию устанавливается initialState. В вашем случае по фильтрам ReducerDefaultState. Позже, если вы хотите изменить состояние избыточности, вам нужно отправить действие. Начальное состояние в вашем конструкторе похоже на this.state, а отправка действия - на this.setState