Каковы преимущества использования промежуточного программного обеспечения Thunk в Redux по сравнению с использованием обычных функций в качестве создателей асинхронных действий?

Question

Я использую Redux уже около двух месяцев и совсем недавно начал изучать различные способы борьбы с асинхронным поведением, такие как выборка данных. Из документации и обсуждений на GitHub следует, что стандартный способ сделать это с помощью промежуточного программного обеспечения Thunk - довольно простая концепция, однако я не уверен, понимаю ли я, насколько полезно передать ответственность выполнения асинхронных конечных автоматов за редукцией. промежуточное ПО, когда можно было использовать простую независимую функцию.

Традиционный подход Redux с использованием промежуточного программного обеспечения Thunk

Async Action Creator fetchPosts

function fetchPosts(reddit) {
  return dispatch => {
    dispatch(requestPosts(reddit))
    return fetch(`http://www.reddit.com/r/${reddit}.json`)
      .then(response => response.json())
      .then(json => dispatch(receivePosts(reddit, json)))
  }
}

Тогда, возможно, в компоненте ReactJS может быть кнопка, подобная приведенной ниже.

Отправка fetchPosts

<button onClick={() => this.props.dispatch(fetchPosts(this.props.reddit))} />

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

Немного более простой пример без промежуточного программного обеспечения

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

Делегированная асинхронная диспетчеризация без создателя действия

function fetchPosts(dispatch, reddit) {
  dispatch(requestPosts(reddit))
  return fetch(`http://www.reddit.com/r/${reddit}.json`)
    .then(response => response.json())
    .then(json => dispatch(receivePosts(reddit, json)))
}

Вызов функции fetchPosts и передача отправки в качестве аргумента.

<button onClick={() => fetchPosts(this.props.dispatch, this.props.reddit)} />

Заключение

Основываясь на двух примерах, я не вижу, как создатель асинхронных действий, использующий промежуточное программное обеспечение thunk, что-то покупает, требует дополнительной сложности при настройке промежуточного программного обеспечения и представляет два варианта чистых функций создателей действий (1), которые возвращают одну отправляемое действие (2) нечистые функции, которые будут направлять действия обратной связи и, возможно, другие сигналы в диспетчер. Я чувствую, что здесь что-то упущено, что объясняет преимущества отправки чего-то другого, кроме неизменного действия в редуксе.

Answer 1

Это очень хорошо протекторная территория. Я бы сказал, что это распространенное мнение, что создатели асинхронных действий не особенно удовлетворяют, но есть веские причины предпочесть Redux Thunk полностью ручному подходу. Но это только один из нескольких возможных подходов. См. Зачем нам промежуточное ПО для асинхронного потока в Redux?,

Я думаю, что сообщество, вероятно, остановится на чем-то ином, чем Redux Thunk, но его простота делает его хорошей отправной точкой.