title: React-Redux - Show and Hide Component
body: <p>The objective is when i mouse over the link on the navbar, i need to show a Component call ProductDescription, and Hide the component when the mouse is not over.</p>
  
  <p>I have a example</p>
  
  <p><a href="https://www.dkny.com/ba/" rel="nofollow noreferrer">https://www.dkny.com/ba/</a></p>
  
  <p>The objective is to make something like that.</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import PaginaInicial from '../containers/index';
  import ListaJogos from '../containers/lista_jogos';
  import ListaMusicas from '../containers/lista_musicas';
  import NavBar from '../containers/menu';
  import ProductDescription from '../containers/produto';
  
  
  export default class App extends Component {
  render() {
  return (
      &lt;div&gt;
          &lt;NavBar /&gt;
          &lt;ProductDescription /&gt;
      &lt;/div&gt;
  );
  }
  }
  </code></pre>
  
  <p><strong>NavBar Component</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  class NavBar extends Component{
  
  
  
  render(){
      return (
          &lt;div&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      )
  }
  
  }
  
  export default NavBar;
  </code></pre>
  
  <p><strong>ProductDescription Component</strong> </p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Produto extends Component{
  
  render(){
  
      return(
  
          &lt;div&gt;Some Product Description&lt;/div&gt;
  
      )
  }
  
  }
  
  
  export default ProductDescription;
  </code></pre>
  
  <p><strong>Actions index.js</strong></p>
  
  <pre><code>function mostrarProduto(product) {
   return {
     type: 'SHOW_PRODUCT',
     payload: product
   }
  }
  
  function esconderProduto(product) {
   return {
    type: 'HIDE_PRODUCT',
    payload: product
   }
  }
  </code></pre>
  
  <p><strong>Product Reducer</strong> </p>
  
  <pre><code>const productReducer = (state = null, action) =&gt; {
    switch (action.type) {
      case 'SHOW_PRODUCT':
        return action.payload;
      case 'HIDE_PRODUCT':
        return null;
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>I dont know what i have to do in the components, i know i have to dispatch the actions, but im confused, could i need some help, thanks.</p>