了解redux中的compose函数

7hiiyaii  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(91)

我试图在redux中创建一个商店,目前我使用以下语法:

const middlewares = [
  thunk,
  logger
]

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

字符串
上面的工作对我来说很好,我可以访问商店,但我最近我遇到了另一种语法:

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


他们两个似乎都在做同样的工作。
有什么理由让我更喜欢其中一个吗?优点/缺点?

ssgvzors

ssgvzors1#

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

  • Compose* 用于当你想传递多个store增强器到store时。Store增强器是高阶函数,可以为store添加一些额外的功能。Redux默认提供的唯一store增强器是 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
检查原始的compose source code可能也很有用,因为它在普通JavaScript中只有10个位置。

相关问题