Redux-Thunk
O que é
O Redux-Thunk é um middleware do Redux que altera a função de dispatch para que ele aceite, além do objeto com o type, uma função que recebe o dispatch como parâmetro, permitindo actions mais complexas, onde uma action consegue disparar outras, além de actions assíncronas e que conhecem o estado atual do store.
Geralmente o Redux-Thunk substitui a função do Redux-Saga, mas nada te impede de utilizar os dois ao mesmo tempo.
Como usar
Adicionar o thunk na lista de de middlewares do store.
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./rootReducer";
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;
Agora sua action, além de ter o formato padrão de {type: 'ACTION_TYPE'}, o dispatch também pode receber uma action no formato:
const action = () => {
return (dispatch, getState) => {
const state = getState(); // Pegar valor atual salvo no store
if (state.count >= 10) {
return;
}
dispatch({ type: "INCREMENT" }); // Disparando uma action no padrão antigo
};
};
Como aprender
Material útil
Validando o conhecimento
- Criar projeto básico com create-react-app e fazer view simples que consegue consumir e modificar um reducer qualquer, criando actions no padrão antigo e no padrão thunk.
- Fazer chamada em uma api dentro de uma action e disparando action de acordo com o retorno (inclusive uma action pra lidar com o erro).