React Firebase Cart Добавить товары Редуктор корзины не работает - PullRequest
Новая
       38

React Firebase Cart Добавить товары Редуктор корзины не работает

0 голосов
/ 12 июля 2020

в настоящее время работает над добавлением элементов в корзину с помощью реакции и сокращения, но добавить элемент не работает

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

Я использую response-redux cartReducer, три файла:

просто не могу понять, как передать fi sh продукты

страницу продукта

действия тележки

редуктор тележки 


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

1 Ответ

0 голосов
/ 21 июля 2020

Итак, концепция React заключается в том, что вам нужно получить доступ к Firebase с помощью функции. Для этого следует использовать функциональный компонент. React позволяет хукам получать доступ к вашему состоянию без конструктора, так что все, а затем вам нужно будет использовать диспетчеризацию. 

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