React-Redux - Показать и скрыть компонент

Question

Целью является то, что я нахожусь над ссылкой на навигационной панели, мне нужно показать компонентный вызов ProductDescription и скрыть компонент, когда мышь не закончилась.

У меня есть пример

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

Цель состоит в том, чтобы сделать что-то подобное.

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 Компонент

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 Компонент

import React, { Component } from 'react'; 

class Produto extends Component{ 

render(){ 

    return(

     <div>Some Product Description</div> 

    ) 
} 

} 


export default ProductDescription; 

Действия index.js

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

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

Reducer продукта

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

Я не знаю, что я должен делать в компонентах, я знаю, что я должен направить действия, но им путать, может, мне нужна помощь, спасибо.

Answer 1

Я собираюсь предположить, что вы будете парить над элементом навигации, и элемент должен отображаться в ProductDescription, который отлично принимает нулевой параметр.

Вам необходимо подключить свой компонент Navbar к магазину redux (или лучше создать виртуальный «виртуальный» контейнер, который подключается к магазину redux) и привязать ваши действия.

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); 

Вы передаете действия в соединение redux и получаете карту в свои реквизиты. Таким образом вы можете отправить эти действия из своих реквизитов, используя своих создателей действия.

Затем в вашем описании продукта вы сопоставляете состояние с поддержкой (без действий) и показываете данные.

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); 

Answer 2

Сначала вам нужно использовать onMouseOver и onMouseLeave функции в NavBar компонента, более конкретно, HTML тег, который вы хотите использовать его.

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

Когда div вводится функция срабатывает один раз. Если мышь покидает этот div и снова вводится, функция снова срабатывает.

Существуют различные способы отправки действия здесь.На основании кода вы условии, что вы можете сделать это непосредственно в компоненте, как так:

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

Или, если вы используете mapDispatchToProps от Redux можно упростить выше этого:

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

Ваши текущие действия использует a payload ключ, но если ProductDescription является единственным компонентом, который вы хотите скрыть/показать, вы можете его опустить, потому что вам не нужно определять, какой продукт следует скрывать/показывать, если в любом случае есть только один. Вы тогда только разослать тип:

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

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

В редукторе вы можете иметь состояние по умолчанию будет false так, что ProductDescription не показывает в начале рендеринга. Когда действия выше посланные редуктор ручки типа соответственно:

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

Теперь ProductDescription потребности читать это состояние как-то и где вы бы использовать connect и mapStateToProps функции от 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) 

Затем в ProductDescription вы должны визуализировать компонент на основе логического значения 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)