Redux createStore, функция compose - как работает этот код?

Question

Я пытаюсь понять работу функций Redux, я могу понять, как мы создаем хранилище Redux и применяем промежуточное ПО.

При создании хранилища Redux мы передаем rootReducers, preloadedState, storeEnhancer.

Но в этом коде я не могу понять, как результирующий энхансер из функции compose передается в качестве входных данных для функции createStore.

import thunk from 'redux-thunk'
import rootReducers from './reducers'
let finalCreateStore = compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore)

export default function configureStore(initialState) {
    return finalCreateStore(rootReducers, initialState)
}

Answer 1

Обе функции applyMiddleware и window.devToolsExtension возвращают «энхансер магазина», то есть функцию вида createStore => createStore.
Каждый из них ожидает получить функцию createStore и возвращает новый, который добавляет некоторые функции во вновь созданное хранилище.

Код может быть написан без составления как:

let finalCreateStore = createStore;

const devToolsStoreEnhancer = window.devToolsExtension ? window.devToolsExtension() : f => f;
finalCreateStore = devToolsStoreEnhancer(finalCreateStore);

const middlewareStoreEnhancer = applyMiddleware(thunk);
finalCreateStore = middlewareStoreEnhancer(finalCreateStore);

Обратите внимание, что compose применяет слои от последнего к первому, поэтому порядок меняется на обратный: https://redux.js.org/api/compose

Теперь finalCreateStore - это функция с сигнатурой, аналогичной оригинальной createStore, но содержит два слоя энхансеров над ней. Теперь вы можете создать свой магазин с кодом, подобным следующему:

const store = finalCreateStore(rootReducer, initialState);

Когда вы звоните finalCreateStore(...), эти слои создают хранилище для вас и добавляют в него промежуточное ПО и поддержку devtools.

Надеюсь, это поможет:)