可重用组件Redux

Question

我有一个可重用的组件，它有自己的action和reducer，然后我在另一个组件中使用。

组件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什么都没有发生，它应该打印控制台日志定义在我的Reducer…当在浏览器中检查AddToStore组件时，我可以在道具中看到组件在Action文件......中定义的AddToCart fn看起来Action没有被分派到减速机…如何解决这个问题?

Answer 1

使用redux连接装饰器

1. 首先，从react-redux绑定中导入它:

   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. 最后，你不希望这个装饰过的组件被导出默认替代未修饰的:

   export default connect(mapStateToProps, null)(AddToCart)
   

此时，您将能够调度任何操作或访问组件内props中的任何存储变量。这是react的默认技术，你会经常用到。

Answer 2

我最终按照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，那里有一个语法错误。我没有输入'export default'，只有'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;
  }
}