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支持。

希望它会有所帮助：）

Redux createStore，撰写功能-此代码如何工作？

1 个答案: