理解redux中的compose函数

Question

我正在尝试使用以下语法在redux中创建一个商店: -

const middlewares = [
  thunk,
  logger
]

const wlStore = createStore(
  rootReducer,
  initialState
  compose(applyMiddleware(...middlewares))
)

以上工作对我来说很好,我可以访问商店,但最近我碰到了另一种语法: -

const wlStore=applyMiddleware(thunk,logger)(createStore)(rootReducer)

他们俩似乎都在做同样的工作.

有什么理由因为我更喜欢一个而不是另一个吗？优点缺点？

Answer 1

提高可读性和便利性是使用撰写的主要优点.

如果要将多个商店增强程序传递到商店,则使用" 撰写".商店增强器是更高阶的功能,可为商店添加一些额外的功能.默认情况下,Redux提供的唯一商店增强器是applyMiddleware,但还有许多其他增强器可用.

Store Enhancers是高阶函数

什么是高阶函数？从Haskell文档转述:

高阶函数可以将函数作为参数,并将函数作为返回值返回.执行其中任何一个的函数称为高阶函数

来自Redux文档:

所有的组合都是让你编写深层嵌套的函数转换而不会使代码向右移动.不要给它太多的功劳!

因此,当我们链接高阶函数(商店增强器)而不是必须编写时

func1(func2(func3(func4))))

我们可以写

compose(func1, func2, func3, func4)

这两行代码做同样的事情.只是语法不同.

Redux示例

如果我们不使用compose,我们会从Redux文档中获得

finalCreateStore = applyMiddleware(middleware)(
      require('redux-devtools').devTools()(
       require('redux-devtools').persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))()
     )
     )(createStore);

而如果我们使用compose

finalCreateStore = compose(
    applyMiddleware(...middleware),
    require('redux-devtools').devTools(),
    require('redux-devtools').persistState(
      window.location.href.match(/[?&]debug_session=([^&]+)\b/)
    )
  )(createStore);

要阅读有关Redux的撰写功能的更多信息,请单击此处