Wiederverwendbare Komponenten Redux

Question

Ich habe eine wiederverwendbare Komponente mit einer eigenen Aktion und Reduktion, die ich dann in einer anderen Komponente verwenden.

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

Ich gebe es in

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

Bei dem Klicken auf AddToCart nichts passiert, wo es eine console.log in meinem Reducer definiert gedruckt werden soll ... bei der Inspektion der AddToStore Komponente im Browser kann ich in den Requisiten sehen, dass die Komponente sieht die AddToCart Fn in der Action-Datei definiert ...... sieht aus wie Aktion wird nicht auf den Reducer geschickt ... wie das zu beheben?

Answer 1

I endete meine Komponente bis Umschreiben als

von Syberic vorgeschlagen

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) 

Zusätzlich korrigierte ich meine Reducer, wo es ein Syntaxfehler war. Ich habe setzen Export default 'nicht, sondern nur ‚Export‘

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

Verwenden Sie redux connect decorator.

1. Zunächst importieren aus reagieren-redux Bindungen:

   import { connect } from 'react-redux'; 
   

2. Dann Ihre Komponente dekorieren mit ihm

   connect(mapStateToProps, mapDispatchToProps)(AddToCart) 
   

   Wo Funktionen in Argumente !: sollte irgendwo definiert werden wie :

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

   Die erste besteht darin, den Geschäftszustand an die Requisiten zu übergeben, die zweite ist, die Aktionen an Requisiten zu übergeben. Sie sind vollständig optional und wenn Sie nicht die Speicher brauchen noch die Aktionen Requisiten gebunden sind, können Sie sie weglassen mit null wie:

   connect(null, mapDispatchToProps)(AddToCart) 
   

3. Schließlich werden Sie diese dekoriert Komponente wan't von exportiert werden Standard anstelle von nicht-verziert ein:

   export default connect(mapStateToProps, null)(AddToCart) 
   

In diesem Moment können Sie alle Aktionen versenden oder ein Speicher zugreifen vars f von props innerhalb der Komponente. Dies ist eine Standardtechnik, um dies zu tun, und Sie werden dies ziemlich viel verwenden. Wenn das immer noch verwirrend klingt, fragen Sie nach Erklärungen.