Artigo original: Redux Thunk Explained with Examples
Redux Thunk é um middleware que permite retornar funções, em vez de apenas ações, dentro do Redux. Isso permite ações com atraso, incluindo trabalhar com promises.
Um dos principais casos de uso desse middleware é para manipular ações que podem não ser síncronas, como, por exemplo, ao usar o axios para enviar uma solicitação GET. O Redux Thunk nos permite fazer o dispatch (envio) dessas ações de forma assíncrona e resolver cada promise que é retornada.
Instalação e configuração
O Redux Thunk pode ser instalado executando npm install redux-thunk --save
ou yarn add redux-thunk
na linha de comando, dependendo do gerenciador de pacotes que você utilizar.
Por ser uma ferramenta do Redux, você naturalmente precisará ter o Redux configurado. Uma vez instalado, ele é ativado usando applyMiddleware()
:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
Como usar o Redux Thunk
Uma vez que o Redux Thunk tenha sido instalado e incluído em seu projeto com applyMiddleware(thunk)
, você pode começar a fazer o dispatch das ações de modo assíncrono.
Por exemplo, esse é um contador simples de incrementos:
const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
function increment() {
return {
type: INCREMENT_COUNTER
};
}
function incrementAsync() {
return dispatch => {
setTimeout(() => {
// Você pode invocar ações síncronas ou assíncronas com o `dispatch`
dispatch(increment());
}, 1000);
};
}
Aqui vemos como configurar ações de sucesso e falha após pesquisar uma API:
const GET_CURRENT_USER = 'GET_CURRENT_USER';
const GET_CURRENT_USER_SUCCESS = 'GET_CURRENT_USER_SUCCESS';
const GET_CURRENT_USER_FAILURE = 'GET_CURRENT_USER_FAILURE';
const getUser = () => {
return (dispatch) => { //funções anônimas
// Ação inicial dispatched (enviada)
dispatch({ type: GET_CURRENT_USER });
// Retorno da promise, passando as ações em caso de sucesso ou falha
return axios.get('/api/auth/user').then(
user => dispatch({ type: GET_CURRENT_USER_SUCCESS, user }),
err => dispatch({ type: GET_CURRENT_USER_FAILURE, err })
);
};
};