GIF89a;<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>redux &#8211; Emerson Broga</title>
	<atom:link href="https://emersonbroga.com/tag/redux/feed/" rel="self" type="application/rss+xml" />
	<link>https://emersonbroga.com</link>
	<description></description>
	<lastBuildDate>Tue, 20 Oct 2020 13:17:37 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.3.1</generator>

<image>
	<url>https://emersonbroga.com/wp-content/uploads/2023/08/cropped-logo-b-pink-512x512-1-32x32.png</url>
	<title>redux &#8211; Emerson Broga</title>
	<link>https://emersonbroga.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Loader Middleware para o Redux</title>
		<link>https://emersonbroga.com/loader-middleware-para-o-redux/</link>
					<comments>https://emersonbroga.com/loader-middleware-para-o-redux/#respond</comments>
		
		<dc:creator><![CDATA[@emersonbroga]]></dc:creator>
		<pubDate>Tue, 20 Oct 2020 13:17:37 +0000</pubDate>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[React]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[middleware]]></category>
		<category><![CDATA[react]]></category>
		<category><![CDATA[redux]]></category>
		<guid isPermaLink="false">http://emersonbroga.com/?p=1774</guid>

					<description><![CDATA[Opa! Se você programa em React e usa o Redux, você provavelmente já tentou imaginar uma forma fácil para exibir um feedback para o usuário enquanto uma requisição esta acontecendo. Seja na hora de submeter um formulário, seja na hora de buscar dados para popular a página.E sim, existem várias<a class="moretag" href="https://emersonbroga.com/loader-middleware-para-o-redux/"> Read more&#8230;</a>]]></description>
										<content:encoded><![CDATA[
<p>Opa! <br /><br />Se você programa em React e usa o Redux, você provavelmente já tentou imaginar uma forma fácil para exibir um feedback para o usuário enquanto uma requisição esta acontecendo. Seja na hora de submeter um formulário, seja na hora de buscar dados para popular a página.<br />E sim, existem várias formas de fazer isso umas mais simples outras mais complexas e hoje eu quero te mostrar uma forma bem interessante de alcançar esse objetivo.</p>



<p>Vamos lá!</p>



<p>Primeiramente eu estou assumindo que você já tem um conhecimento sobre React e Redux (<a href="https://www.youtube.com/watch?v=V5ImO3Y5Xp0">se não tiver ainda, eu posso te mostrar o caminho</a>), e que você ja configurou todos os actions e reducers no seu projeto e por fim que você use a estrutura de action &#8220;padrão&#8221; com type e payload.<br /></p>



<p>A ideia aqui é você fazer com que cada action que você disparar que tiver uma promise não resolvida em seu payload, gere automaticamente uma outra action que terá o mesmo type com o sufixo <strong>&#8220;_LOADING&#8221;</strong> para que dessa forma sua aplicação entenda como tratar isso e retornar um feedback para o usuário.</p>



<p>Agora que você ja entendeu a ideia, o conceito por trás de tudo isso, você vai precisar de fazer os seguintes passos:</p>



<p>Criar um middleware do redux, chamado <strong>Loader.js</strong></p>



<figure class="wp-block-image size-large"><img decoding="async" fetchpriority="high" width="1024" height="482" src="https://emersonbroga.com/wp-content/uploads/2020/10/redux-loader-middleware-loader-js-1024x482.png" alt="" class="wp-image-1780" srcset="https://emersonbroga.com/wp-content/uploads/2020/10/redux-loader-middleware-loader-js-1024x482.png 1024w, https://emersonbroga.com/wp-content/uploads/2020/10/redux-loader-middleware-loader-js-300x141.png 300w, https://emersonbroga.com/wp-content/uploads/2020/10/redux-loader-middleware-loader-js-768x361.png 768w, https://emersonbroga.com/wp-content/uploads/2020/10/redux-loader-middleware-loader-js.png 1480w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>Depois vá até o seu <strong>store</strong>, e use o apply middlewares para agregar o <strong>Loader.js</strong></p>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="506" src="https://emersonbroga.com/wp-content/uploads/2020/10/redux-loader-middleware-store-js-1024x506.png" alt="" class="wp-image-1781" srcset="https://emersonbroga.com/wp-content/uploads/2020/10/redux-loader-middleware-store-js-1024x506.png 1024w, https://emersonbroga.com/wp-content/uploads/2020/10/redux-loader-middleware-store-js-300x148.png 300w, https://emersonbroga.com/wp-content/uploads/2020/10/redux-loader-middleware-store-js-768x380.png 768w, https://emersonbroga.com/wp-content/uploads/2020/10/redux-loader-middleware-store-js.png 1480w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="Redux Loader Middleware" width="750" height="563" src="https://www.youtube.com/embed/9inzyaTCWNw?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div><figcaption>Exemplo do Loader em ação</figcaption></figure>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://emersonbroga.com/loader-middleware-para-o-redux/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>