Redux Thunk

Antes de falar sobre Redux Thunk é importante relembrar o cíclo de vida do Redux:

Imagem

Como é mostrado na imagem acima, a action é disparada por algum evento. Que pode ser um clique em algum botão por exemplo. Essa action é enviada para o reducer através do dispatch, o valor é evoluído no store e todos os componentes ligados ao valor alterado são renderizados automaticamente. 

Quando precisamos fazer algum procedimento assíncrono como uma requisição http em que dependo do retorno da requisição para encaminhar ao reducer temos um problema. Para resolver esse problema temos que usar o Redux Thunk para que possamos segurar o retorno da action até que o processo assíncrono finalize.

Agora vamos a prática. Como de costume, vamos utilizar o projeto já funcionando com React e Redux que fizemos nesse post 

Primeiramente vamos navegar até a pasta do projeto pelo prompt e instalar o redux-thunk

npm install --save redux-thunk

Agora no arquivo index.js vamos fazer a importação do Redux-thunk e applyMiddleware do redux. E na função createStore vamos chamar a função applyMiddleware passando o ReduxThunk como parâmetro:

import React from 'react';
import ReactDOM from 'react-dom';
import {combineReducers, createStore,applyMiddleware} from 'redux';
import Contador from './Contador';
import contadorReducer from './contadorReducer';
import {Provider} from 'react-redux';
import ReduxThunk from 'redux-thunk';
  
 const reducers = combineReducers({
    contadorReducerChave:contadorReducer
 });
 
 ReactDOM.render(
        <Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}>
             <Contador/>
        </Provider>
        ,document.getElementById("meu-app"));

Agora no arquivo ContadorAction.js ao invés de retornar o objeto diretamente, vamos retornar uma função passando como parametro o dispatch. Dentro dessa função chamamos o setTimeout para simular um processo assícrono. Nesse caso, recebo o dispach e depois de 1 segundo ao invés de retornar o objeto diretamente, chamo a função dispatch retornando o objeto:

export const somarAction = (valorAtual) => {
    return dispatch => {
        setTimeout(function(){
            dispatch({ type: "SOMAR", valorSomado: valorAtual+1 });
        },1000);
    }        
}

Se tudo ocorreu bem, quando clicamos no botão somar, a action só é enviada para o recucer depois de 1 segundo:

Imagem

 

Comentários

 

(há 1 ano) Alex Alan Nunes:

Showww!

[responder]

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente