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 ，但还有许多其他增强器可供使用。

商店增强器是高阶函数

什么是高阶函数？从Haskell docs：

转述

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

来自Redux文档：

所有编写的功能都是让您编写深层嵌套的函数转换，而不会使代码向右移动。不要给它太多的信用！

因此，当我们链接高阶函数（商店增强器）而不必编写

时

func1(func2(func3(func4))))

我们可以写

compose(func1, func2, func3, func4)

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

Redux示例

如果我们不使用撰写，请从Redux docs开始

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

然而，如果我们使用撰写

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

详细了解Redux的撰写函数click here

理解redux中的compose函数

1 个答案: