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