Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

125
Visualizações
React-Redux - Show and Hide Component

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.

I have a example

https://www.dkny.com/ba/

The objective is to make something like that.

app.js

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 (
    <div>
        <NavBar />
        <ProductDescription />
    </div>
);
}
}

NavBar Component

import React, { Component } from 'react';

class NavBar extends Component{



render(){
    return (
        <div>
            <ul>
                <li><a href="#">Link 1</a></li>
            </ul>
        </div>
    )
}

}

export default NavBar;

ProductDescription Component

import React, { Component } from 'react';

class Produto extends Component{

render(){

    return(

        <div>Some Product Description</div>

    )
}

}


export default ProductDescription;

Actions index.js

function mostrarProduto(product) {
 return {
   type: 'SHOW_PRODUCT',
   payload: product
 }
}

function esconderProduto(product) {
 return {
  type: 'HIDE_PRODUCT',
  payload: product
 }
}

Product Reducer

const productReducer = (state = null, action) => {
  switch (action.type) {
    case 'SHOW_PRODUCT':
      return action.payload;
    case 'HIDE_PRODUCT':
      return null;
    default:
      return state;
  }
}

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.

over 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

I am going to assume that you will be hovering over navbar item and the item needs to be displayed in ProductDescription, which is fine accepting null parameter.

You need to connect your Navbar component to redux store (or better, create a navbar "smart" container that connects to redux store) and bind your actions.

import React from 'react';
import { connect } from 'react-redux';

import { mostrarProduto, esconderProduto } from 'actions/index.js';

export class Navbar extends React.Component {

    constructor(props) {
        super(props);
        this.showProduct = this.showProduct.bind(this);
        this.hideProduct = this.hideProduct.bind(this);
    }

    showProduct() {
        // Bind object however you like
        this.props.mostrarProduto(productObjHere);
    }

    hideProduct() {
        // Bind object however you like
        // Also, if only want to show a single product on mouse over,
        // you don't need to pass product object; your reducer also returns null
        // for this one.
        this.props.esconderProduto(productObjHere);
    }

    render() {
        return (
            <ul>
                <li>
                    <a href="#" onMouseOver={this.showProduct} onMouseOut={this.hideProduct}>
                        Link #1
                    </a>
                </li>
            </ul>
        );
    }

}

const { func } = React.PropTypes;

Navbar.propTypes = {
    mostrarProduto.isRequired,
    esconderProduto.isRequired
};

export default connect(
    () => {},
    { mostrarProduto, esconderProduto }
)(Navbar);

You pass actions into redux connect and the get mapped into your props. This way you can dispatch these actions from your props using your action creators.

Then in your Product Description, you map the state to prop (no actions) and show the data.

import React from 'react';
import { connect } from 'react-redux';

export class ProductDescription extends React.Component {

    render() {
        return (
            <div>{this.props.hoveredProduct}</div>
        );
    }

}

const { func } = React.PropTypes;

const mapStateToProps = state => ({
    hoveredProduct: state.product
});
// I used different names for state and mapped prop, so the declaration
// is clear

export default connect(
    mapStateToProps,
    null
)(ProductDescription);
over 4 years ago · Santiago Trujillo Relatório

0

First you'll need to use the onMouseOver and onMouseLeave functions in the NavBar component, more specifically, the HTML tag that you'd like to use it in.

<div onMouseOver={/* dispatch action here */} onMouseLeave={/* dispatch action here */}>
  <ul>
      <li><a href="#">Link 1</a></li>
  </ul>
</div>

When the div is entered the function fires once. If the mouse leaves this div and entered again the function fires again.

There are different ways you can dispatch an action here. Based on the code you provided you can do it directly within the component like so:

<div onMouseOver={this.props.dispatch(mostrarProduto())} onMouseLeave={this.props.dispatch(esconderProduto())}>

Or if you use mapDispatchToProps from Redux you can simplify the above to this:

<div onMouseOver={this.props.mostrarProduto()} onMouseLeave={this.props.esconderProduto()}>

Your current actions uses a payload key but if ProductDescription is the only component you want to hide/show you can omit it because you don't need to identify which product to hide/show if there is only one anyways. You then only have to dispatch the type:

function mostrarProduto() {
  return {
    type: 'SHOW_PRODUCT'
  }
}

function esconderProduto() {
  return {
   type: 'HIDE_PRODUCT'
  }
}

In the reducer you can have the default state be false so that the ProductDescription does not show at the start of the render. When the actions above are dispatched the reducer handles the type accordingly:

const productReducer = (state = false, action) => {
  switch (action.type) {
    case 'SHOW_PRODUCT':
      return true;
    case 'HIDE_PRODUCT':
      return false;
    default:
      return state;
  }
}

Now ProductDescription needs to read this state somehow and that's where you'd use the connect and mapStateToProps functions from Redux:

const mapStateToProps = (state) => ({
  shouldBeVisible: state.shouldBeVisible //<----- replace `shouldBeVisible` with what ever you're setting in your state store. See `createStore` in the Redux docs for more info.
})

export default connect(mapStateToProps)(ProductDescription)

Then in ProductDescription you'd render the component based on the boolean value of this.props.isVisible:

class ProductDescription extends React.Component {
  //...

  render() {
      if (this.props.shouldBeVisible) {
        return <div>Some Product Description</div>
      } else { // shouldBeVisible is false, then show nothing.
        return null
      }
  }
}

const mapStateToProps = (state) => ({
  shouldBeVisible: state.shouldBeVisible
})

export default connect(mapStateToProps)(ProductDescription)
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda