Многоразовые компоненты Redux

Question

У меня есть многоразовый компонент с собственным действием и редуктором, который затем я использую в другом компоненте.

Компонент AddToCart

import React, { Component } from 'react' 
import { bindActionCreators } from 'redux' 

import Button from 'environment/atoms/button' 
import * as AppIndexActionsCreators from 'environment/AppIndexActionsCreators' 

const AddToCart = (props)=>{ 
    let boundActionCreators = bindActionCreators(AppIndexActionsCreators) 
    return(
     <Button 
     txt="Add To Cart" 
     {...boundActionCreators} 
     /> 
    ) 
    } 
export default AddToCart; 

я передать его в

import React from 'react' 
import { Link } from 'react-router' 
import ProductDesc from '../Molecules/ProductDesc' 
import ProductImg from 'environment/sharedMolecules/ProductImg' 
import AddToCart from 'environment/sharedMolecules/AddToCart' 

const Product = (props) => { 
    const product = props.product; 
    return (
     <div> 
     <Link to={`/productDesc/${product.id}`}> 
      <ProductDesc {...props} /> 
      <ProductImg {...props} 
      size="small" 
      /> 
     </Link> 
     <AddToCart/> 
     </div> 
    ) 
} 
Product.propTypes = { 
    displayProduct: React.PropTypes.func, 
    product: React.PropTypes.object 
}; 

По щелчку на AddToCart ничего не происходит, где он должен напечатать console.log, как это определено в моем Reducer ... при осмотре AddToStore компонент в браузере я могу видеть в реквизитах, что компонент видит AddToCart fn, определенный в файле Action ... выглядит как Action не отправляется на редуктор ... как это исправить?

Answer 1

Я в конечном итоге переписывания мой компонент, как было предложено Syberic

import React, { Component } from 'react' 
import { bindActionCreators } from 'redux' 
import { connect } from 'react-redux'; 

import Button from 'environment/atoms/button' 
import * as AppIndexActionsCreators from 'environment/AppIndexActionsCreators' 

const AddToCart = (props) => { 

    // let boundActionCreators = bindActionCreators(AppIndexActionsCreators) 
    return(

     <Button 
     txt="Ajouter au panier" 
     clickAddToCart = { props.addToCart } 
     /> 

) 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators(AppIndexActionsCreators, dispatch); 
} 

export default connect(null,mapDispatchToProps)(AddToCart) 

Кроме того я исправил свою Reducer, где была ошибка синтаксиса. Я не ставил «экспорта по умолчанию», но только «экспорт»

import { ADD_TO_CART } from './ActionTypes' 

export default function cart(state=[],action){ 
    console.log(); 
    switch (action.type){ 
    case ADD_TO_CART: 
     console.log('yeah'); 
     return state; 
    default: 
     return state; 
    } 
} 

Answer 2

Используйте декоративный декоратор decux.

1. Во-первых, импортировать его из реагирующих-перевождь привязок:

   import { connect } from 'react-redux'; 
   

2. Затем украсить ваш компонент с ней !:

   connect(mapStateToProps, mapDispatchToProps)(AddToCart) 
   

   Где функции аргументы должны быть определены где-нибудь :

   function mapStateToProps(state) { 
       return { 
       // someStoreVar: state.someStore.someStoreVar 
       }; 
   } 
   
   function mapDispatchToProps(dispatch) { 
       return bindActionCreators({ ...AppIndexActionsCreators }, dispatch); 
   } 
   

   Первый должен передать состояние магазина в реквизиты, второй - передать действия на реквизиты. Они полностью по желанию, и если вы не нуждаетесь в магазине, ни действия, связанные с реквизитом вы можете опустить их с null как:

   connect(null, mapDispatchToProps)(AddToCart) 
   

3. Наконец вы wan't этого декорированного компонента будет экспортироваться по умолчанию вместо не декорированных один:

   export default connect(mapStateToProps, null)(AddToCart) 
   

в этот момент вы будете иметь возможность отправлять какое-либо действие или получить доступ к любому магазину варов е rom props внутри компонента. Это метод по умолчанию, чтобы сделать это в реакции, и вы будете использовать это довольно много. Если это все еще звучит путано, не стесняйтесь просить объяснений.