Redux - понимание редукторов комбайнов

Я работаю над учебником по Redux и пытаюсь разобраться в этом фрагменте кода:

export const combineReducers = (config) =>{
    return (state, action) => {
        return Object.keys(config).reduce((state, key) => {
            const reducer = config[key];
            const previousState = state.get(key);
            const newValue = reducer(previousState, action);

            if (!newValue) {
                throw new Error(`A reducer returned undefined when reducing key::"${key}"`);
            }
            return state.set(key, newValue);
        }, state);
    }
}

Я пытаюсь понять, как все это связано. У меня есть файл index.js в папке reducers, который вызывает combineReducers.

export const reducer = combineReducers({
    currentUser
});

currentUser, который я передаю в качестве параметра конфигурации, выглядит так:

export const currentUser = createReducer(null, {
    [UPDATE_STATUS](state,action) {
        return state.set(`status`,action.status);
    }
});

А это функция createReducer:

export const createReducer = (initialState, handlers)=>{
    return function reducer(state = initialState, action) {
        if (handlers.hasOwnProperty(action.type)) {
            return handlers[action.type](state, action)
        } else {
            return state
        }
    }
}

Итак, мы передаем createReducer, который возвращает функцию редуктора в combineReducers. Итак, на этом этапе мы получаем что-то вроде этого, как я предполагаю:

export const combineReducers = (config) =>{
    // this is just for demonstration purposes, to show what I assume ends up as a config argument
    // config = {
    //     currentUser: function reducer(state = initialState, action) {
    //                     if (handlers.hasOwnProperty(action.type)) {
    //                         return handlers[action.type](state, action)
    //                     } else {
    //                         return state
    //                     }
    //                 }
    //  }
    // where function reducer has access to parameters that were passed previously
    // initialState = null
    // handlers = {
    //     [UPDATE_STATUS](state,action) {
    //         return state.set(`status`,action.status);
    //      }
    //  }

    return (state, action) => {
        return Object.keys(config).reduce((state, key) => {
            const reducer = config[key];
            const previousState = state.get(key);
            const newValue = reducer(previousState, action);

            if (!newValue) {
                throw new Error(`A reducer returned undefined when reducing key::"${key}"`);
            }
            return state.set(key, newValue);
        }, state);
    }
}

Но я не понимаю, куда мы передаем state и action и вызываем ту функцию, которую возвращает combineReducers? Был бы очень признателен, если бы кто-нибудь прояснил это и показал, где происходит фактический звонок.

мы передаем функцию

Hamms 17.03.2018 01:03

Ваш последний фрагмент кода недействителен. Даже если бы это было так, в этом мало смысла. Например, вы немедленно переназначаете аргумент функции на что-то другое. Почему?

Yury Tarabanko 17.03.2018 08:19

@YuryTarabanko Извините, я не совсем понял, это было просто для демонстрации, чтобы показать, что, как я предполагаю, заканчивается аргументом конфигурации.

Leff 17.03.2018 08:43

Предполагается, что аргумент @Leff config внутри combineReducers будет объектом, все свойства которого являются функциями. currentUser - это функция. Но когда вы выполняете combineReducers({currentUser}), вы фактически создаете объект с единственным свойством combineReducers({ currentUser: currentUser }).

Yury Tarabanko 17.03.2018 09:03

Что касается «Я не вижу, куда мы передаем состояние и действие», вы экспортируете функцию редуктора export const reducer, которая позже будет использоваться при создании хранилища. Передача state и action выполняется кодом redux lib при отправке действия.

Yury Tarabanko 17.03.2018 09:04

@YuryTarabanko Значит, передача состояния и действия происходит где-то в функции createStore?

Leff 17.03.2018 09:07

Ну и да, и нет. Редуктор будет вызываться один раз, когда вы создаете хранилище для заполнения начального состояния src, но это действие не будет обрабатываться вашим «настоящим» кодом. Таким образом, фактические вызовы бизнес-логики внутри reducer будут происходить, когда вы отправляете действие известного типа, например, UPDATE_STATUS, и инфраструктура redux передаст ему текущее состояние и действие.

Yury Tarabanko 17.03.2018 09:19

@YuryTarabanko Ладно, если я правильно понял, в коде redux происходит «волшебство»? Спасибо за объяснения!

Leff 17.03.2018 09:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
8
172
0

Другие вопросы по теме