Задать вопрос

Зачем нужен redux-thunk?

Сегодня с коллегой возникла небольшая дискуссия, я утверждал, что redux-thunk очень удобная надстройка (middleware) над redux и позволяет создавать асинхронные экшены.
Коллега возразил, зачем нужен redux-thunk, когда можно сделать вот так:
export function load(){
    setTimeout(()=>{
        store.dispatch(getProfileSuccess({id: 1}));
    }, 3000)
}

Т.е он импортит store в определенный файл проекта и вызывает несколько экшенов

По началу я впал в ступор, действительно, зачем redux-thunk, если можно испортить стор, но позже проанализировав ситуацию, пришел к выводу, что асинхронные экшены, например как в примере выше загрузка профиля должна иметь 3 состояния:
- старт загрузки профиля (для отображения лоадера)
- данные профиля успешно загружены
- возникла ошибка при загрузке данных
исходя из этого, если действовать по методу коллеги, необходимо создавать для каждого действия отдельную функцию (экшены)

Вот пример с использованием redux-thunk
export function getProfile () => {
  return dispatch => {
    // диспатчим лоадер
    dispatch({
      type: GET_PROFILE_START,
      payload: true
    })
    
    axios.get('/user')
      .then(res => {
        // успешно получили данные
        dispatch({
          type: GET_PROFILE_SECCUESS
          payload: res.data
        })
      })
      .cath(err => {
        // Ошибка...
        dispatch({
          type: GET_PROFILE_ERROR
          payload: true
        })
      })
  }
}


Преимущества redux-thunk очевидны, и больше всего мне нравится то, что с помощью redux-thunk всю логику можно хранить в экшенах и тем самым разгрузить компоненты, это одновременно делает проект чище, ведь логика будет находится внутри экшенов, вместо того, чтобы импортить стор в разные части проекта

Что вы скажите, какое мнение верно, и имеет ли права на жизнь предложенное коллегой решение?
  • Вопрос задан
  • 21141 просмотр
Подписаться 3 Оценить Комментировать
Ответ пользователя Islam Ibakaev К ответам на вопрос (5)
devellopah
@devellopah
Я бы сказал, что redux-thunk, redux-saga или какое-то другое "решение" для организации сайд-эффектов не является необходимой зависимостью для любого приложения, написанного на reactjs.
Точно так же как и не является необходимостью сам redux. Но если ваше приложение нуждается в инструменте для управления состоянием(redux), то автоматически из этого следует, что оно так же нуждается в инструменте для организации сайд-эффектов.

В redux-thunk вы диспатчите функцию словно это action. Это очень важно. В контейнере вне зависимости от "природы" экшена, вы будете писать this.props.dispatch(whateverAction).

А ваш коллега, напротив, будет вынужден синхронные экшены диспатчить через this.props.dispatch(syncAction), а асинхронный просто вызовом функции, содержащей setTimeout.

Как-то не очень красиво, да и самому контейнеру не обязательно знать какие экшены синхронные, а какие асинхронные.
Ответ написан