Я пытаюсь получить данные от объекта с именем initialState и console.log, но объект возвращается пустым ... связанные файлы ниже, спасибо заранее!
basketReducer. js
import { ADD_PRODUCT_BASKET, GET_NUMBERS_BASKET } from '../actions/types'
const initialState = {
basketNumbers: 0,
cartCost: 0,
products: {
blackOne: {
name: "Black One",
price: 120,
numbers: 0,
inCart: false
},
blackThree: {
name: "Black Three",
price: 120,
numbers: 0,
inCart: false
},
blackFour: {
name: "Black Four",
price: 120,
numbers: 0,
inCart: false
}
}
}
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
}
}
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
})
}
}
типов. js
export const ADD_PRODUCT_BASKET = 'ADD_PRODUCT_BASKET'
export const GET_NUMBERS_BASKET = 'GET_NUMBERS_BASKET'
FilterPanel. js
Примечание: я не ориентированы на данные от государства. Пока я использую только метод onClick в методе рендеринга, чтобы получить this.props.addBasket (item.name)
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 shoesToShow = shoes.map(item => {
if (item.mainColor === this.state.color) {
return <div key={item._id} className="each-shoe-div col-sm-6 col-md-6 col-lg-3">
<div>
<img className="img-fluid image" src={item.image} alt="pic"/>
<p>{item.name}</p>
<p>${item.price}</p>
<p onClick={ () => this.props.addBasket(item.name)} className="basket-p" >Add to cart</p>
</div>
</div>
} else {
return null
}
})
console.log(this.props)
return (
<React.Fragment>
<div className="form-div">
<form>
{colors.map((color, index) => (
<label key={index}>
{color}
<input
value={color}
checked={this.state.color === color}
onChange={this.handleColorChange}
type="radio"
/>
</label>
))}
</form>
</div>
<div className="filtered-shoes">{shoesToShow}</div>
</React.Fragment>
)
}
}
export default connect(null, { addBasket })(FilterPanel)
Я бы хотел, чтобы нажатие кнопки привело к странице корзины с данными Информация добавлена. Вот реальные данные, которые я хочу использовать для кнопки добавления в корзину:
shoe.model. js (схема обуви):
const mongoose = require('mongoose')
const Schema = mongoose.Schema
let Shoe = new Schema({
image: {
type: String
},
cartImage: {
type: String
},
name: {
type: String
},
color: {
type: String
},
price: {
type: Number
},
mainColor: {
type: String
},
midImage: {
type: String
},
heroFeatured: {
type: Boolean
},
message: {
type: String
}
})
module.exports = mongoose.model('Shoe', Shoe)
shoe.route. js (маршрут обуви):
const express = require('express')
const shoeRouter = express.Router()
const Shoe = require('./shoe.model')
shoeRouter.route('/shoes').get((req, res) => {
Shoe.find((err, shoes) => {
if(err) {
console.log(err)
} else {
res.json(shoes)
}
})
})
shoeRouter.route('/shoes/:id').get((req, res) => {
let id = req.params.id
Shoe.findById(id, (err, shoe) => {
res.json(shoe)
})
})
module.exports = shoeRouter
сервер. 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);
})
Я не знал, как реализовать корзину для покупок, поэтому я следовал руководству .
Объект initialState из (basketReducer. js) - это фальшивые данные, которые я смоделировал после моих реальных данных. Я попытался добавить ложную модель данных из учебника (только что добавил копию реальных данных)
Как мне добиться этого с моими исходными данными из (filterPanel. js state) ?? Спасибо!