Я работаю над учебником по 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?
Был бы очень признателен, если бы кто-нибудь прояснил это и показал, где происходит фактический звонок.
Ваш последний фрагмент кода недействителен. Даже если бы это было так, в этом мало смысла. Например, вы немедленно переназначаете аргумент функции на что-то другое. Почему?
@YuryTarabanko Извините, я не совсем понял, это было просто для демонстрации, чтобы показать, что, как я предполагаю, заканчивается аргументом конфигурации.
Предполагается, что аргумент @Leff config внутри combineReducers будет объектом, все свойства которого являются функциями. currentUser - это функция. Но когда вы выполняете combineReducers({currentUser}), вы фактически создаете объект с единственным свойством combineReducers({ currentUser: currentUser }).
Что касается «Я не вижу, куда мы передаем состояние и действие», вы экспортируете функцию редуктора export const reducer, которая позже будет использоваться при создании хранилища. Передача state и action выполняется кодом redux lib при отправке действия.
@YuryTarabanko Значит, передача состояния и действия происходит где-то в функции createStore?
Ну и да, и нет. Редуктор будет вызываться один раз, когда вы создаете хранилище для заполнения начального состояния src, но это действие не будет обрабатываться вашим «настоящим» кодом. Таким образом, фактические вызовы бизнес-логики внутри reducer будут происходить, когда вы отправляете действие известного типа, например, UPDATE_STATUS, и инфраструктура redux передаст ему текущее состояние и действие.
@YuryTarabanko Ладно, если я правильно понял, в коде redux происходит «волшебство»? Спасибо за объяснения!



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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