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

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

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

Создатель асинхронных действий 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, который возвращает функцию, которая принимает отправку и отвечает за выполнение любого асинхронного кода, который может иметь побочные эффекты, а также за отправку истинные действия, которые могут возникнуть.

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

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

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

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) нечистые функции, которые будут возвращать действия и, возможно, другие преобразователи в диспетчер. Я чувствую, что мне не хватает чего-то здесь, что объяснило бы преимущества отправки чего-то другого, кроме неизменного действия в редуксе.


reactjs javascript redux asynchronous redux-thunk
person jpierson    schedule 11.01.2016    source источник
comment
Возможный дубликат Почему нам нужно промежуточное ПО для асинхронного потока в Редукс?   -  person acjay    schedule 11.01.2016
comment
Согласен, это дубликат. Жаль, что я не нашел его, прежде чем напечатать все это :(   -  person jpierson    schedule 11.01.2016

Ответы (1)


arrow_upward
6
arrow_downward

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

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

person acjay    schedule 11.01.2016