根据添加到购物车的商品创建购物车页面

Question

将商品添加到购物车中并且在购物车页面上有商品信息时，如何创建购物车页面？

以下相关文件：

FilterPanel.js

注意：数据来自mongodb地图集

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addBasket } from '../actions/addAction'
import axios from 'axios'
import './FilterPanel.css'


export class FilterPanel extends Component {
    constructor(props) {
        super(props)

        this.state = {
            color: "",
            shoes: []
        }

        this.handleColorChange = this.handleColorChange.bind(this)
    }

    componentDidMount() {
        axios.get('http://localhost:4000/shoes')
            .then(res => {
                const shoeData = res.data
                this.setState({
                    shoes: shoeData
                })
            })
            .catch((error) => {
                console.log(error)
            })
    }

    handleColorChange(e) {
        const color = e.target.value
        console.log(color)
        this.setState({
            color: color
        })
    }

    render() {
        console.log(this.props)
        const { shoes } = this.state
        const colors = ["Black", "Blue", "Brown", "Gray", "Green", "Red", "White"]

        const loadShoes = shoes.map(item => {
            if (item.price) {
                return <div key={item._id} className="img-fluid image each-shoe-div col-sm-6 col-md-6 col-lg-3">
                            <img src={item.image} alt="pic"/>
                            <p className="first-p">{item.name}</p>
                            <p className="second-p">${item.price}</p>
                            <p onClick={() => this.props.addBasket(item.name)} className="basket-p">Add to cart</p>
                       </div>  
            }  else {
                return null
            }   
        })

        console.log(this.props)

        return (
            <React.Fragment>
                <div className="form-div">
                    <form>
                        {colors.map((color, index) => (
                            <label className="label-item" key={index}>
                                {color}
                                <input
                                    value={color}
                                    checked={this.state.color === color}
                                    onChange={this.handleColorChange}
                                    type="checkbox"
                                />
                            </label>
                        ))}
                    </form>
                </div>
                <div className="filtered-shoes">
                    <div className="load-shoe-div">
                        {loadShoes}
                    </div>
                </div>
            </React.Fragment>
        )
    }
}

function mapDispatchToProps(dispatch) {
    return {
        addBasket: (param) => dispatch(addBasket(param))
    }
}

export default connect(null, mapDispatchToProps)(FilterPanel)

Server.js

const express = require('express')
const app = express()
const cors = require('cors')
const mongoose = require('mongoose')
const shoeRouter = require('./shoe.route')
const userRouter = require('./user.route')
const emailRouter = require('./email.route')
//const routes = express.Router()


const PORT = 4000

app.use(cors())
app.use(express.urlencoded({ extended: false }))
app.use(express.json())


mongoose.connect('mongodb connection...', { useUnifiedTopology: true, useNewUrlParser: true })
const connection = mongoose.connection

connection.once('open', () => {
    console.log("MongoDB database connection established successfully")
})


app.use('/', shoeRouter)
app.use('/', userRouter)
app.use('/', emailRouter)


app.listen(PORT, () => {
    console.log('Server is running on port ' + PORT);
})

basketReducer.js

注意：该文件来自我正在尝试实现到我的项目的在线教程。他们的initialState对象在此文件中创建了数据。我想将mongodb地图集的数据添加到该对象。

import { ADD_PRODUCT_BASKET, GET_NUMBERS_BASKET } from '../actions/types'

const initialState = {
   // Not sure how I should get data from mongodb ?????...
}

export default (state = initialState, action) => {
    switch(action.type) {
        case ADD_PRODUCT_BASKET:
          let addQuantity = { ...state.products[action.payload] }
          console.log(addQuantity)

            return {
              ...state,
              basketNumbers: state.basketNumbers + 1
            }
        case GET_NUMBERS_BASKET:
            return {
                ...state
            }
        default:
            return state
    }
} 

store.js

import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'
import rootReducer from './reducers'

const initialState = {}
const middleware = [thunk]

const store = createStore(
    rootReducer,
    initialState,
    composeWithDevTools(applyMiddleware(...middleware))
)

export default store

index.js

此文件的路径：reducers / index.js（不是顶级index.js文件）

import { combineReducers } from 'redux'
import basketReducer from './basketReducer'

export default combineReducers({
    basketState: basketReducer
})

addAction.js

import { ADD_PRODUCT_BASKET} from './types'


export const addBasket = (productName) => {
    return (dispatch) => {
        console.log('Adding to Basket')
        console.log('Product:', productName)
        dispatch({
            type: ADD_PRODUCT_BASKET,
            payload: productName
        })
    }
}

getAction.js

import { GET_NUMBERS_BASKET } from './types'

export const getNumbers = () => {
    return (dispatch) => {
        console.log('Getting all Basket Numbers')
        dispatch({
            type: GET_NUMBERS_BASKET
        })
    }
}