<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Software Engineer</title>
    <description>The latest articles on DEV Community by Software Engineer (@sergioxdev).</description>
    <link>https://dev.to/sergioxdev</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F83806%2F55b36ed4-0bd4-411a-aa36-eecea1df0e8b.png</url>
      <title>DEV Community: Software Engineer</title>
      <link>https://dev.to/sergioxdev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sergioxdev"/>
    <language>en</language>
    <item>
      <title>What If? We compare programming languages with Superheroes</title>
      <dc:creator>Software Engineer</dc:creator>
      <pubDate>Tue, 21 Mar 2023 19:15:13 +0000</pubDate>
      <link>https://dev.to/sergioxdev/what-if-we-compare-programming-languages-with-superheroes-nlc</link>
      <guid>https://dev.to/sergioxdev/what-if-we-compare-programming-languages-with-superheroes-nlc</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--5WrVhiFb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://static1.cbrimages.com/wordpress/wp-content/uploads/2019/08/JL-vs-Avengers-Feature.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5WrVhiFb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://static1.cbrimages.com/wordpress/wp-content/uploads/2019/08/JL-vs-Avengers-Feature.jpeg" alt="" width="800" height="428"&gt;&lt;/a&gt;&lt;br&gt;
Programming languages have come a long way since the early days of computing, and with each passing year, we are introduced to new and improved languages that make programming more efficient and powerful. In this article, we will be comparing some of the most popular modern programming languages to superheroes, highlighting their strengths and abilities.&lt;/p&gt;

&lt;h2&gt;
  
  
  Python – The Spiderman of Programming Languages
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mbUkZiVQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/133.jpg%3Fv%3D1615880202" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mbUkZiVQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/133.jpg%3Fv%3D1615880202" alt="" width="240" height="320"&gt;&lt;/a&gt;&lt;br&gt;
Python is a popular language known for its versatility and easy-to-learn syntax, much like Spiderman who is known for his flexibility and agility. Just as Spiderman has the ability to spin webs and traverse through the city with ease, Python has the ability to interact with various platforms and systems with ease. Python also has an extensive library of modules that make programming tasks simpler, much like how Spiderman has a wide range of gadgets at his disposal.&lt;/p&gt;

&lt;h2&gt;
  
  
  Java – The Superman of Programming Languages
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ykfFkzeF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/791.jpg%3Fv%3D1610931347" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ykfFkzeF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/791.jpg%3Fv%3D1610931347" alt="java" width="240" height="320"&gt;&lt;/a&gt;&lt;br&gt;
Java is a powerful language known for its robustness and scalability, much like Superman who is known for his superhuman strength and durability. Java’s virtual machine allows it to run on a variety of platforms, just as Superman can fly and move at incredible speeds without any external aid. Java also has a vast community of developers who contribute to its development, much like how Superman has the support of his Justice League teammates.&lt;/p&gt;

&lt;h2&gt;
  
  
  JavaScript – The Flash of Programming Languages
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Lnl1b7TC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/20398.jpg%3Fv%3D1597101503" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Lnl1b7TC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/20398.jpg%3Fv%3D1597101503" alt="" width="240" height="320"&gt;&lt;/a&gt;&lt;br&gt;
JavaScript is a language known for its speed and interactivity, much like the Flash who is known for his superhuman speed and ability to move through time. JavaScript is widely used for web development and allows for the creation of interactive and dynamic web pages. Similarly, the Flash can manipulate time and move at incredible speeds, making him an asset in any fight.&lt;/p&gt;

&lt;h2&gt;
  
  
  C++ – The Hulk of Programming Languages
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hQ1owhc7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/83.jpg%3Fv%3D1602211487" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hQ1owhc7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/83.jpg%3Fv%3D1602211487" alt="" width="240" height="320"&gt;&lt;/a&gt;&lt;br&gt;
C++ is a language known for its power and ability to handle complex operations, much like the Hulk who is known for his incredible strength and ability to smash anything in his path. C++ is often used for system-level programming and game development, where its raw power is put to use. Similarly, the Hulk can take on anything that comes his way with his raw strength and power.&lt;/p&gt;

&lt;h2&gt;
  
  
  Swift – The Iron Man of Programming Languages
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--M4DNnGBE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/17655.jpg%3Fv%3D1580251788" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--M4DNnGBE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/17655.jpg%3Fv%3D1580251788" alt="" width="240" height="320"&gt;&lt;/a&gt;&lt;br&gt;
Swift is a language developed by Apple for iOS and macOS development, much like how Tony Stark developed the Iron Man suit to help him fight crime. Swift is known for its speed and simplicity, allowing developers to quickly develop and deploy applications. Similarly, Iron Man’s suit allows him to quickly analyze and respond to threats with its advanced technology.&lt;/p&gt;

&lt;h2&gt;
  
  
  Ruby – The Wolverine of Programming Languages
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--iy1KitFe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/161.jpg%3Fv%3D1605762552" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iy1KitFe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/161.jpg%3Fv%3D1605762552" alt="" width="240" height="320"&gt;&lt;/a&gt;&lt;br&gt;
Ruby is a language known for its simplicity and flexibility, much like Wolverine who is known for his adaptability and self-healing abilities. Ruby allows developers to quickly and easily create prototypes and develop applications, much like how Wolverine can adapt to any situation and heal himself from any injury.&lt;/p&gt;

&lt;h2&gt;
  
  
  Kotlin – The Black Widow of Programming Languages
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--uAEgpHhq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/51254.jpg%3Fv%3D1666211152" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--uAEgpHhq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/51254.jpg%3Fv%3D1666211152" alt="" width="240" height="320"&gt;&lt;/a&gt;&lt;br&gt;
Kotlin is a language developed by JetBrains for Android development, much like how Black Widow is a skilled spy and assassin who works for S.H.I.E.L.D. Kotlin is known for its ease of use and interoperability with Java, making it a valuable asset in Android development. Similarly, Black Widow is known for her espionage skills and ability to work seamlessly with other Avengers.&lt;/p&gt;

&lt;h2&gt;
  
  
  Rust – The Captain America of Programming Languages
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--JT1iD3uh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/30090.jpg%3Fv%3D1636903011" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JT1iD3uh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/30090.jpg%3Fv%3D1636903011" alt="" width="240" height="320"&gt;&lt;/a&gt;&lt;br&gt;
Rust is a language known for its speed and reliability, much like Captain America who is known for his leadership and reliability in battle. Rust is often used for system-level programming and is known for its ability to handle memory management, making it a reliable choice for complex applications. Similarly, Captain America is a natural leader and a reliable asset in any fight.&lt;/p&gt;

&lt;h2&gt;
  
  
  PHP – The Ant-Man of Programming Languages
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--u1nVZl3Z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/857.jpg%3Fv%3D1492002735" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--u1nVZl3Z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/857.jpg%3Fv%3D1492002735" alt="" width="240" height="320"&gt;&lt;/a&gt;&lt;br&gt;
PHP is a language known for its ability to scale up or down as needed, much like Ant-Man&lt;/p&gt;

&lt;p&gt;who can shrink or grow in size as needed. PHP is widely used for web development and allows for the creation of dynamic and interactive web pages. Similarly, Ant-Man can shrink to tiny sizes to infiltrate tight spaces or grow to giant sizes to fight against large threats.&lt;/p&gt;

&lt;h2&gt;
  
  
  Go – The Thor of Programming Languages
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1n3cBdmL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/140.jpg%3Fv%3D1631100159" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1n3cBdmL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.superherodb.com/pictures2/portraits/10/050/140.jpg%3Fv%3D1631100159" alt="" width="240" height="320"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Go is a language known for its concurrency and scalability, much like Thor who is known for his ability to wield the powerful Mjolnir and summon lightning. Go’s concurrency allows it to handle multiple operations simultaneously, making it a valuable asset in large-scale applications. Similarly, Thor’s powers allow him to wield powerful lightning strikes and take on multiple enemies at once.&lt;/p&gt;

&lt;p&gt;In conclusion, modern programming languages are like superheroes with unique abilities and strengths that make them valuable assets in different scenarios. Whether you need a language for system-level programming, web development, or mobile app development, there is a programming language out there that can fit your needs. The key is to understand each language's strengths and weaknesses and choose the right one for your project.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>languages</category>
      <category>superheroes</category>
    </item>
    <item>
      <title>React &amp; Redux explicado con Tacos</title>
      <dc:creator>Software Engineer</dc:creator>
      <pubDate>Wed, 15 Mar 2023 19:30:31 +0000</pubDate>
      <link>https://dev.to/sergioxdev/react-redux-explicado-con-tacos-mdg</link>
      <guid>https://dev.to/sergioxdev/react-redux-explicado-con-tacos-mdg</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fstatic.vecteezy.com%2Fsystem%2Fresources%2Fpreviews%2F015%2F025%2F578%2Foriginal%2Ftaco-with-meat-and-vegetable-traditional-latin-american-mexican-fast-food-tacos-logo-icon-sticker-food-concept-vintage-retro-flat-cartoon-style-vector.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fstatic.vecteezy.com%2Fsystem%2Fresources%2Fpreviews%2F015%2F025%2F578%2Foriginal%2Ftaco-with-meat-and-vegetable-traditional-latin-american-mexican-fast-food-tacos-logo-icon-sticker-food-concept-vintage-retro-flat-cartoon-style-vector.jpg" title="Tacos" alt="Tacos"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Supongamos que tienes una taquería en la que los clientes pueden hacer pedidos de tacos personalizados. Cada vez que un cliente hace un pedido, necesitas mantener un registro de los ingredientes que se utilizaron para hacer los tacos. Aquí es donde Redux puede ser útil.&lt;/p&gt;

&lt;p&gt;En términos simples, Redux es una herramienta de manejo de estado que se utiliza comúnmente en aplicaciones de React. En este caso, usaríamos Redux para almacenar el estado de los pedidos de tacos, que incluiría los ingredientes utilizados.&lt;/p&gt;

&lt;p&gt;En Redux, el estado de la aplicación se almacena en un objeto llamado "store". El store es el único lugar donde se almacena el estado de la aplicación. Esto significa que si necesitamos actualizar el estado, debemos hacerlo a través de acciones que se envían al store.&lt;/p&gt;

&lt;p&gt;En nuestro ejemplo de taquería, podríamos crear un store de Redux para almacenar los pedidos de tacos:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createStore&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;redux&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;initialState&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;orders&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;orderReducer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;initialState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;action&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;switch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;action&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ADD_ORDER&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;orders&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[...&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;orders&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;action&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;payload&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
      &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="nl"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;store&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createStore&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;orderReducer&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aquí, creamos un store que tiene un estado inicial que incluye un array vacío de pedidos. También creamos un reductor orderReducer que manejará las acciones, incluyendo la acción de 'ADD_ORDER' que agrega un nuevo pedido al estado del store.&lt;/p&gt;

&lt;p&gt;Luego, podemos usar React para crear una interfaz de usuario que permita a los clientes hacer pedidos de tacos. En nuestro componente de pedido, podemos usar Redux para agregar nuevos pedidos al store:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useDispatch&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react-redux&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;OrderForm&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;ingredients&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setIngredients&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;([]);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;dispatch&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useDispatch&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleSubmit&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;preventDefault&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="nf"&gt;dispatch&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ADD_ORDER&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;payload&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;ingredients&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="nf"&gt;setIngredients&lt;/span&gt;&lt;span class="p"&gt;([]);&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleIngredientChange&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;checked&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nf"&gt;setIngredients&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;ingredients&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
      &lt;span class="nx"&gt;checked&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="p"&gt;[...&lt;/span&gt;&lt;span class="nx"&gt;ingredients&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;ingredients&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;form&lt;/span&gt; &lt;span class="nx"&gt;onSubmit&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;handleSubmit&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h2&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Build&lt;/span&gt; &lt;span class="nx"&gt;your&lt;/span&gt; &lt;span class="nx"&gt;own&lt;/span&gt; &lt;span class="nx"&gt;taco&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h2&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;label&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt;
          &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;checkbox&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
          &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;beef&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
          &lt;span class="nx"&gt;checked&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;ingredients&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;includes&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;beef&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;
          &lt;span class="nx"&gt;onChange&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;handleIngredientChange&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="nx"&gt;Beef&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/label&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;label&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt;
          &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;checkbox&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
          &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;cheese&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
          &lt;span class="nx"&gt;checked&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;ingredients&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;includes&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cheese&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;
          &lt;span class="nx"&gt;onChange&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;handleIngredientChange&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="nx"&gt;Cheese&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/label&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;submit&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Order&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/form&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aquí, creamos un componente OrderForm que maneja el estado local de los ingredientes de los tacos con el hook useState. Cuando se envía el formulario, usamos el hook useDispatch para enviar una acción al store de Redux con los ingredientes seleccionados. Luego, limpiamos el estado local de ingredientes y renderizamos el formulario de nuevo.&lt;/p&gt;

&lt;p&gt;En resumen, en este ejemplo de taquería, usamos Redux para almacenar el estado de los pedidos&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FJCLCkKk%2FDALL-E-2023-03-15-12-22-19-tacos-nuclear.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FJCLCkKk%2FDALL-E-2023-03-15-12-22-19-tacos-nuclear.png" title="Redux &amp;amp; Tacos" alt="Redux &amp;amp; Tacos"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>React &amp; Redux</title>
      <dc:creator>Software Engineer</dc:creator>
      <pubDate>Wed, 15 Mar 2023 19:09:36 +0000</pubDate>
      <link>https://dev.to/sergioxdev/react-redux-3dc9</link>
      <guid>https://dev.to/sergioxdev/react-redux-3dc9</guid>
      <description>&lt;p&gt;React y Redux son dos herramientas de código abierto que se han convertido en una combinación popular para el desarrollo de aplicaciones web. React es una biblioteca de JavaScript que se utiliza para construir interfaces de usuario, mientras que Redux es un contenedor de estado que se utiliza para administrar el estado de la aplicación en una aplicación React.&lt;/p&gt;

&lt;p&gt;React es una herramienta potente para construir interfaces de usuario escalables y de alto rendimiento. Su enfoque de "unidireccional" significa que los datos fluyen en una sola dirección, lo que facilita el mantenimiento y la depuración de grandes aplicaciones. Sin embargo, a medida que una aplicación crece en complejidad, el manejo del estado puede volverse complicado.&lt;/p&gt;

&lt;p&gt;Aquí es donde entra Redux. Redux es un contenedor de estado global que se utiliza para almacenar el estado de la aplicación. Redux se basa en el patrón de diseño Flux, que se enfoca en el manejo del estado de una aplicación. La ventaja de Redux es que permite mantener un estado coherente y predecible en toda la aplicación, lo que facilita la comprensión y el mantenimiento del código.&lt;/p&gt;

&lt;p&gt;La forma en que funciona Redux es que toda la información de estado se almacena en un solo "store". Cada vez que un componente necesita acceder al estado, lo hace a través de un "selector" que extrae los datos del store. Cuando se actualiza el estado, se envía una "acción" que describe la actualización al store, que actualiza el estado y notifica a todos los componentes que necesitan saber.&lt;/p&gt;

&lt;p&gt;Al usar React y Redux juntos, se crea una aplicación escalable y fácil de mantener. La combinación de React y Redux facilita la actualización del estado de la aplicación y la propagación de esos cambios a través de la interfaz de usuario. Además, la estructura unidireccional de React complementa perfectamente el patrón unidireccional de Redux.&lt;/p&gt;

&lt;p&gt;En resumen, React y Redux son dos herramientas de código abierto que se complementan entre sí para crear aplicaciones web escalables y fáciles de mantener. React se enfoca en la construcción de interfaces de usuario, mientras que Redux se enfoca en el manejo del estado de la aplicación. Al utilizar ambos juntos, se crea una aplicación coherente y predecible que es fácil de mantener y actualizar.&lt;/p&gt;

&lt;h3&gt;
  
  
  Ejemplo sencillo de cómo implementar Redux en un proyecto ReactJS
&lt;/h3&gt;

&lt;p&gt;Supongamos que queremos crear una aplicación de contador. La idea es que al hacer clic en un botón "Aumentar", el número en pantalla aumentará en uno. Primero, creamos nuestro store en Redux:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createStore&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;redux&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;initialState&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;counterReducer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;initialState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;action&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;switch&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;action&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;INCREMENT&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="nl"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;store&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;createStore&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;counterReducer&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aquí, definimos un estado inicial de { count: 0 } y un reductor counterReducer que manejará las acciones. La única acción que manejará nuestro reductor es la de 'INCREMENT', que aumentará el valor de count en uno.&lt;/p&gt;

&lt;p&gt;Luego, creamos un componente en React que se suscribe al store y renderiza el estado:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;connect&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react-redux&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;Counter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h1&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h1&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Increase&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;mapStateToProps&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;mapDispatchToProps&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;dispatch&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;dispatch&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;INCREMENT&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;connect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;mapStateToProps&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;mapDispatchToProps&lt;/span&gt;&lt;span class="p"&gt;)(&lt;/span&gt;&lt;span class="nx"&gt;Counter&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aquí, usamos la función connect de React Redux para suscribir nuestro componente al store. La función mapStateToProps toma el estado del store y lo mapea a las props del componente, mientras que mapDispatchToProps mapea las acciones a los props del componente. En este caso, mapeamos la acción 'INCREMENT' al botón de aumento.&lt;/p&gt;

&lt;p&gt;Finalmente, podemos usar nuestro componente en cualquier lugar de nuestra aplicación:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;ReactDOM&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react-dom&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Provider&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react-redux&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;Counter&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Counter&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;store&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./store&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;ReactDOM&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;render&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Provider&lt;/span&gt; &lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Counter&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Provider&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;,
&lt;/span&gt;  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;root&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>react</category>
      <category>redux</category>
      <category>javavascript</category>
      <category>state</category>
    </item>
    <item>
      <title>Abrir la consola desde cualquier carpeta en Windows.</title>
      <dc:creator>Software Engineer</dc:creator>
      <pubDate>Thu, 14 Mar 2019 00:44:26 +0000</pubDate>
      <link>https://dev.to/sergioxdev/abrir-la-consola-desde-cualquier-carpeta-en-windows-id2</link>
      <guid>https://dev.to/sergioxdev/abrir-la-consola-desde-cualquier-carpeta-en-windows-id2</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fbw420pdup4bmwqn6j23u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fbw420pdup4bmwqn6j23u.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Últimamente he estado trabajando desarrollo web y algo que me pasaba mucho a la hora de correr mis proyectos desde consola, era que me daba mucha pereza tener que irme a la raíz &lt;b&gt;(C:/)&lt;/b&gt; y después entrar a la carpeta donde tenía el proyecto para poder correrlo.&lt;/p&gt;

&lt;p&gt;Por lo que me di a la tarea de buscar la forma de abrir la consola sobre la carpeta que estoy trabajando y ahorrarme algunos valiosos segundos de trabajo, resulta que es de lo más sencillo de lo mundo y se los resumo en los siguientes pasos.&lt;/p&gt;

&lt;p&gt;&lt;b&gt;1)&lt;/b&gt; Abrir el Editor de Registro, esto se hace abriendo el menú principal de Windows y escribiendo: REGEDIT, te aparecerá un icono con un cubo azul. En otras versiones de Windows tal vez sea necesario hacerlo en el comando “Ejecutar”.&lt;/p&gt;

&lt;p&gt;&lt;b&gt;2)&lt;/b&gt; Ubiquen la carpeta: &lt;b&gt;HKEY_CLASSES_ROOT&amp;lt;/b&amp;gt;&lt;br&gt;
y dentro de ella: &lt;b&gt;Directory&amp;lt;/b&amp;gt;&lt;br&gt;
y dentro de ella: &lt;b&gt;shell&amp;lt;/b&amp;gt;&lt;/b&gt;&lt;/b&gt;&lt;/b&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F7pr8f10ls2qmi5d7tsda.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F7pr8f10ls2qmi5d7tsda.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;b&gt;3)&lt;/b&gt; Ahora den clic derecho sobre la carpeta &lt;b&gt;shell&lt;/b&gt; y seleccionen: &lt;b&gt;nuevo &amp;gt; clave&lt;/b&gt;, les creará una carpeta nueva que deberán nombrar: &lt;b&gt;"CommandPrompt"&lt;/b&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F00psblhbwphv79pcricc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F00psblhbwphv79pcricc.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;b&gt;4)&lt;/b&gt; Sobre la carpeta que acaban de crear, darán nuevamente clic derecho y crearan otra clave que ahora llamaran &lt;b&gt;“Command”&lt;/b&gt;.&lt;/p&gt;

&lt;p&gt;&lt;b&gt;5)&lt;/b&gt; Estando dentro de su carpeta Command, seleccionen el archivo solitario que aparece a su derecha como &lt;b&gt;(Predeterminado)&lt;/b&gt; y les mostrará una ventana donde pueden escribir en el campo: &lt;b&gt;"Informacion del valor"&lt;/b&gt; aquí escriban &lt;b&gt;“cmd.exe /k cd %1”&lt;/b&gt; y presionen aceptar.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fc6v7w608ba5pso5ws9pw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fc6v7w608ba5pso5ws9pw.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;b&gt;6)&lt;/b&gt; Finalmente vuelvan a seleccionar la primer carpeta que crearon &lt;b&gt;“CommandPrompt”&lt;/b&gt; y seleccionen el archivo &lt;b&gt;(Predeterminado)&lt;/b&gt; y de igual forma en el campo &lt;b&gt;“Informacion del valor”&lt;/b&gt; escriban el mensaje que aparecerá en el menú emergente para ir a la consola, en mi caso le puse: &lt;b&gt;Abrir consola aquí&lt;/b&gt;,  pero son libres de poner lo que gusten.&lt;/p&gt;

&lt;p&gt;&lt;b&gt;7)&lt;/b&gt; Como extra y solo si quieren, en la misma carpeta &lt;b&gt;“CommandPrompt”&lt;/b&gt; pueden agregar otro valor dando clic derecho debajo del archivo &lt;b&gt;(Predeterminado)&lt;/b&gt; y seleccionando &lt;b&gt;nuevo &amp;gt;  Valor Cadena&lt;/b&gt;, nómbrenlo &lt;b&gt;Icon&lt;/b&gt; y en su valor &lt;b&gt;“Informacion del valor”&lt;/b&gt; pongan: &lt;b&gt;"C:\Windows\System32\cmd.exe",0&lt;/b&gt; con esto les aparecerá el icono en su nuevo menú.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fdny3jgf2rzzoywhblzd8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fdny3jgf2rzzoywhblzd8.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Con esto podrás lograr abrir tu consola en cuestión de segundos desde el directorio que estés trabajando. Espero les sea de utilidad y cualquier duda dejen sus comentarios.&lt;/p&gt;

</description>
      <category>tricks</category>
      <category>windows</category>
      <category>developers</category>
      <category>consola</category>
    </item>
    <item>
      <title>¿Hay personas de México o América Latina posteando aquí en Dev.To?</title>
      <dc:creator>Software Engineer</dc:creator>
      <pubDate>Thu, 12 Jul 2018 01:01:40 +0000</pubDate>
      <link>https://dev.to/sergioxdev/hay-personas-de-mxico-o-amrica-latina-posteando-aqu-en-devto-5anh</link>
      <guid>https://dev.to/sergioxdev/hay-personas-de-mxico-o-amrica-latina-posteando-aqu-en-devto-5anh</guid>
      <description>&lt;p&gt;Hola a todos los devs latinos que están en esta plataforma, soy parte de una startup mexicana llamada Pixcomp donde desarrollamos videojuegos, apps y proyectos creativos en general.&lt;/p&gt;

&lt;p&gt;¿Cuantos latinos mas hay por aquí?&lt;/p&gt;

</description>
      <category>mexico</category>
      <category>latam</category>
      <category>startup</category>
      <category>español</category>
    </item>
  </channel>
</rss>
