理解 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

提高可读性和便利性是使用 compose 的主要优势。

Compose 用于将多个商店增强器传递给商店时。存储增强器是向存储添加一些额外功能的高阶函数。 Redux 默认提供的唯一存储增强器是 applyMiddleware，但还有许多其他可用。

存储增强器是高阶函数

什么是高阶函数？转述自Haskell docs：

高阶函数可以将函数作为参数，返回函数作为返回 价值观。执行其中任何一项的函数称为高阶函数 功能

来自 Redux 文档：

compose 所做的只是让您编写深度嵌套的函数转换，而无需代码向右漂移。不要太相信它！

所以当我们链接我们的高阶函数（存储增强器）而不是编写时

func1(func2(func3(func4))))

我们可以写

compose(func1, func2, func3, func4)

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

Redux 示例

来自Redux docs，如果我们不使用 compose 我们将拥有

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 的 compose 函数click here