Repository files navigation

redux-saga é uma lib que visa fazer side effects(efeitos colaterais) (i.e. coisas assincronas como data fetching e coisas impuras como acessar o cache do browser) em aplicações React/Redux mais fácil e melhor.

O modelo mental é que uma saga é como uma thread separada em sua aplicação que é unicamente responsável por side effects.redux-saga é um redux middleware, que significa que essa thread pode ser estartada, pausada e cancelada na aplicação principal com normais redux actions, ela tem acesso a todo o state(estado) da aplicação redux e pode também dispatch(dispachar) ações.

Saga usa uma feature(característica) do ES6 chamada Generators para fazer fazer fluxos assincronos fáceis de ler, escrever e testar.(Se você não está familirizada com elasAqui tem alguns links introdutórios) Para fazê-los, fluxos assincronos veja como o padrão assincrono JavaScript code. (algo comoasync/await, mas generators tem coisas mais incríveis que nós precisamos)

Talvez você já tenha usadoredux-thunk para lidar com sua busca de dados. Contrários ao redux thunk, você não acaba em callback hell, você pode testar fácilmente seus fluxos assincronos e suas actions continuam puras.

$ npm install --save redux-saga

ou

$ yarn add redux-saga

Alternativamente, você pode usar o fornecido UMD build diretamente no<script> tag de uma página HTML. VejaEsta sessão.

Supomos que temos uma UI para buscar alguns dados dos usuários de um servidor remoto quando um botão é clicado. ( Breve resumo, iremos mostrar apenas ações disparados no código)

classUserComponentextendsReact.Component{  ...onSomeButtonClicked(){const{ userId, dispatch}=this.propsdispatch({type:'USER_FETCH_REQUESTED',payload:{userId}})}  ...}

O Component dispara uma simples action Object na Store. Criaremos uma Saga que escuta todos osUSER_FETCH_REQUESTED actions e dispara uma chamada na API para buscar usuários.

import{call,put,takeEvery,takeLatest}from'redux-saga/effects'importApifrom'...'// trabalho do Saga: irá disparar uma ação USER_FETCH_REQUESTEDfunction*fetchUser(action){try{constuser=yieldcall(Api.fetchUser,action.payload.userId);yieldput({type:"USER_FETCH_SUCCEEDED",user:user});}catch(e){yieldput({type:"USER_FETCH_FAILED",message:e.message});}}/*  Estarta fetchUser em cada ação disparada `USER_FETCH_REQUESTED`.  Permite concorrentes buscar de usuários*/function*mySaga(){yieldtakeEvery("USER_FETCH_REQUESTED",fetchUser);}/*  Alternativa você pode usar takeLatest.  Não permite buscar concorrentes de usuários. Se "USER_FETCH_REQUESTED" captura dispachados enquanto uma busca já está pendente, esta busca pendente é chamada e só a mais recente irá executar.*/function*mySaga(){yieldtakeLatest("USER_FETCH_REQUESTED",fetchUser);}exportdefaultmySaga;

Para executar nosso Saga, teremos que conectar isto ao Redux Store usando oredux-saga middleware

import{createStore,applyMiddleware}from'redux'importcreateSagaMiddlewarefrom'redux-saga'importreducerfrom'./reducers'importmySagafrom'./sagas'// criação do saga middlewareconstsagaMiddleware=createSagaMiddleware()// agrupe na storeconststore=createStore(reducer,applyMiddleware(sagaMiddleware))// então execute o sagasagaMiddleware.run(mySaga)// renderiza a aplicação

• Introdução
• Conceitos Básicos
• Conceitos Avançados
• Recipes
• Recursos Externos
• Soluções de Problemas
• Glossário
• Refência da API

• Chinês
• Chinês Tradicional
• Japonês
• Coreano
• Russo
• Português

Exibe também uma buildumd doredux-saga disponível no diretóriodist/. Ao usar a build do umdredux-saga está disponível comoReduxSaga no objeto window. Isso permite que você crie o middleware Saga sem usar a sintaxe ES6import, assim:

varsagaMiddleware=ReduxSaga.default()

A versão umd é útil caso você não utilize Webpack ou Browserify. Você pode acessá-la diretamente através dounpkg.

As seguintes builds estão disponíveis:

• https://unpkg.com/redux-saga/dist/redux-saga.js
• https://unpkg.com/redux-saga/dist/redux-saga.min.js

Importante! Se o browser que você está trabalhando não suporta osES2015 generators, você deve fornecer um polyfill válido, como ofornecido pelobabel. O polyfill deve ser importado antes doredux-saga:

import'babel-polyfill'// thenimportsagaMiddlewarefrom'redux-saga'

$ git clone https://github.com/redux-saga/redux-saga.git$cd redux-saga$ npm install$ npmtest

Abaixo há os exemplos portados (até agora) dos repositórios do Redux.

Há três exemplos de contadores.

Exemplo usando Javascript puro e build UMD. Todo o código está inline no arquivoindex.html.

Para executar o exemplo, basta abririndex.html no seu browser.

Importante: seu browser deve suportar Generators. A última versão do Chrome/Firefox/Edge oferecem suporte.

Exemplo usandowebpack e a API de alto níveltakeEvery.

$ npm run counter# test sample for the generator$ npm run test-counter

Exemplo usando uma API de baixo nível para demonstrar cancelamento de tarefas.

$ npm run cancellable-counter

$ npm run shop# test sample for the generator$ npm run test-shop

$ npm run async# test sample for the generators$ npm run test-async

$ npm run real-world# sorry, no tests yet

Redux-Saga com TypeScript requerDOM.Iterable ouES2015.Iterable. Se o seutarget éES6, provavelmente você não precisa fazer nada, mas paraES5 você precisará adicionar isso você mesmo.Verifique seutsconfig.json e a documentação oficial paracompiler options.

Você pode achar o logo oficial do Redux-Saga com diferentes versões nodiretório de logos.

Apoie-nos com uma doação mensal e ajude-nos a continuar nossas atividades. [Tornar-se um apoiador]

Torne-se um patrocinador e obtenha seu logotipo em nosso README no Github com um link para seu site. [Tornar-se um patrocinador]