React Firebase购物车添加项目购物车减速器不起作用

Question

目前正在使用 react 和 redux 将商品添加到购物车，但添加商品不起作用

我正在从我的收藏页面中获取项目，然后将密钥传递给产品预览页面

我用的是 react-redux cartReducer 这三个文件是

只是不知道如何通过鱼制品

产品页面

购物车操作

推车减速器

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import firebase from '../../firebase/firebase';
import { connect } from 'react-redux';
import { addItem } from '../../redux/cart/cart-actions'


class FishPage extends Component {
     constructor(props) {
          super(props);
          this.ref = firebase.firestore().collection('fishproducts');
          this.unsubscribe = null;
          this.state = {
            fishproducts: []
          };
        }

     componentDidMount() {
          const ref = firebase.firestore().collection('fishproducts').doc(this.props.match.params.id);
          ref.get().then((doc) => {
               if (doc.exists) {
                    this.setState({
                         fishproducts: doc.data(),
                         key: doc.id,
                         isLoading: false
                    });
               } else {
                    console.log("No such document!");
               }
          });

          
     }


     render() {
          
          return (
               <div >
                    <div>
                         <div>
                              <h4><Link to="/">back</Link></h4>
                              <h3>
                                   {this.state.fishproducts.name}
                              </h3>
                         </div>
                         <div >
                              <dl>
                                   <dt>Description:</dt>
                                   <dd>{this.state.fishproducts.description}</dd>
                                   <dt>Discount:</dt>
                                   <dd>{this.state.fishproducts.discount}</dd>
                                   <dt>Size:</dt>
                                   <dd>{this.state.fishproducts.size}</dd>
                                   <dt>Weight:</dt>
                                   <dd>{this.state.fishproducts.weight}</dd>
                                   <dt>Price:</dt>
                                   <dd>{this.state.fishproducts.price}</dd>
                                   <dt>Stock:</dt>
                                   <dd>{this.state.fishproducts.stock}</dd>
                              </dl>
                              <button onClick={() => addItem(this.state.fishproducts)} >ADD TO CART</button>
                         </div>
                    </div>
               </div>
          );
     }
}

const mapDispatchToProps = dispatch => ({
     addItem: item => dispatch(addItem(item))
})

export default connect(null, mapDispatchToProps)(FishPage);```




this is cart action page 



```import CartActionTypes from './cart-types';

export const toggleCartHidden = () => ({
type:CartActionTypes.TOGGLE_CART_HIDDEN

});

export const addItem = item => ({
    type: CartActionTypes.ADD_ITEM,
    payload: item
})```





this is cart reducer 


```import CartActionTypes from './cart-types';

const INITIAL_STATE = {
    hidden: true,
    cartItems: []
  };

  export const cartReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
      case CartActionTypes.TOGGLE_CART_HIDDEN:
        return {
          ...state,
          hidden: !state.hidden
        };
        case CartActionTypes.ADD_ITEM:
          return {
            ...state,
            //cartItems: addItem(state.cartItems, action.payload)
            cartItems: [...state.cartItems,action.payload]
          };
    
        default:
            return state;
    }
  }

  export default cartReducer;```





cant figure out how to pass fishproducts

Answer 1

所以 React 的概念是你需要使用一个函数来访问 Firebase。为此，您应该使用功能组件。 React 允许 Hooks 无需构造函数即可访问您的状态，仅此而已 然后你需要使用 dispatch。

  
import React, { useState, useEffect } from 'react';
import firebase from '../../firebase/firebase';
import { Link } from 'react-router-dom';
import { connect , useDispatch} from "react-redux";
import { addItem}  from '../../redux/cart/cart-actions';



const FishPage = (props) => {

        
    const [state, setState] = useState({
        name: '',
        … rest of the values
        isLoading: true,
    })
    const { name, … rest of the values } = state;

    useEffect(() => {
        setState({ isLoading: true });
        const ref = firebase.firestore().collection('fishproducts').doc(props.match.params.id);
        ref.get().then((doc) => {
            setState({
                name: doc.data().name,
                … rest of the values
        
                isLoading: false,
            });
        })
    }, [props.match.params.id])


    const  item = [];
    const dispatch = useDispatch();

    return (
    
        <div >
                    <div>
                        //your body here
                              <button onClick={() => dispatch(addItem(item))} >ADD TO CART</button>
                         </div>
                    </div>
               </div>
    );

}

const mapDispatchToProps = dispatch => {
    return{
        addItem: (item) => dispatch(addItem(item))
    }
}

export default connect(null, mapDispatchToProps)(FishPage)