Понимание функций составления в приставке

Question

Я пытался создать магазин в Redux, для которого я в настоящее время использую следующий синтаксис:-

const middlewares = [
  thunk,
  logger
]

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

Вышесказанное прекрасно работает для меня, и я могу получить доступ к магазину, но в последнее время я столкнулся с другим синтаксисом:-

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

Кажется, что они оба делают одну и ту же работу.

Есть ли какая-то причина, по которой я должен предпочесть одно другому? За и против?

Answer 1

Улучшенная читаемость и удобство являются основными преимуществами использования композиции.

Compose используется, когда вы хотите передать в магазин несколько расширений магазина. Усовершенствования магазина - это функции высшего порядка, которые добавляют в магазин некоторые дополнительные функции. Единственный усилитель хранилища, который поставляется с Redux по умолчанию, - applyMiddleware, однако доступно много других.

Усовершенствования магазина - функции высшего порядка

Что такое функции высшего порядка? Перефразировано из документов на Haskell:

Функции высшего порядка могут принимать функции в качестве параметров и возвращать функции в качестве возвращаемых значений. Функция, которая выполняет любую из этих функций, называется функцией более высокого порядка.

Из документов Redux:

Все, что делает compose - это позволяет вам писать глубоко вложенные преобразования функций без смещения кода вправо. Не отдавайте этому должного!

Поэтому, когда мы объединяем наши функции более высокого порядка (хранимые энхансеры) вместо того, чтобы писать

func1(func2(func3(func4))))

мы могли бы просто написать

compose(func1, func2, func3, func4)

Эти две строки кода делают то же самое. Это только синтаксис, который отличается.

Пример Redux

Из документов Redux, если мы не будем использовать 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, нажмите здесь