Question

我正在尝试使用react-native和redux建立商店。在我的shop组件中，有以下代码：

function SingleItem(props) {

  return  <View key={"Cards"}>
       {props.items && props.items.map((item, i) => 
(
      <View className="card" key={i}>
            <View style={styles.img}>
             <Image 
            source={images.cart[item.img]}
            style={styles.img}
             />
             
            </View>
            <View style={styles.textContainer}>
            <Text style={styles.title}>{item.title}</Text>
             <Text style={styles.price}>{item.price}</Text>
            </View>
            <View style={styles.descContainer}>
                <Text style={styles.desc}>{item.desc}</Text>
            </View>
            <View style={styles.buttonContainer}>
            <Button 
                title= "Learn More"
                />
                <Button 
                title= {item.inventory > 0 ? "Add to cart" : "Sold Out"}
                disabled={item.inventory > 0 ? false : true}
                onPress={() => {
                    props.addItems(item)
                    props.QtyUp(item.id, 1)
                }}
                />
               
            </View>    
        </View>
)
       )}
   </View>
}

**概括地说，此组件从shoppingReducer请求商店数据，然后映射返回的数组，将每个对象放置在“ Card”上。 **

我的Redux动作如下所示：

export function addItem (item, arr) {

    return {
    type: "ADD_ITEM", 
    payload: item
    }
}
export function deleteFromCart (item){
    console.log("Request recieved.")
    return {
        type:"DELETE_ITEM",
        payload: item
    }
}

export function quantityUp(id, val) {
    return {
        type: "QTY_UP", 
        id, 
        up: val
    }
}

export function quantityDown(id, val){
    return {
        type: "QTY_DOWN", 
        id, 
        down: val
    }
}
export function purchase(cart){
    return{ 
        type: "PURCHASE",
        cart
    }
}

上述操作应该执行以下命令：

addItem：单击卡后，将其添加到阵列列表中（购物车[]）
deleteFromCart：从购物车中删除了该物品
quantityUp：用户将商品添加到购物车后，增加商品数量并减少库存
quantityDown：与（3）非常相似，增加库存，减少数量
购买：基本上是用户的最后一站，这使他们可以购买他们要购买的商品（购物车阵列）

这些动作的减速器在这里描述：


import Item1 from '../../assets/cart/item1.jpg'
import Item2 from '../../assets/cart/item2.jpg'
import Item3 from '../../assets/cart/item3.jpg'
import Item4 from '../../assets/cart/item4.jpg'
import Item5 from '../../assets/cart/item5.jpg'
import Item6 from '../../assets/cart/item6.jpg'

const INITIAL_STATE = {
cart: [

],
items: [
    {id:1,title:'Winter body', desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, ex.", price:110,img:"item1", quantity: 0, inventory: 20},
    {id:2,title:'Adidas', desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, ex.", price:80,img: 'item2', quantity: 0, inventory: 20},
    {id:3,title:'Vans', desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, ex.",price:120,img: 'item3', quantity: 0, inventory: 20},
    {id:4,title:'White', desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, ex.", price:260,img:'item4', quantity: 0, inventory: 20},
    {id:5,title:'Cropped-sho', desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, ex.", price:160,img: 'item5', quantity: 0, inventory: 20},
    {id:6,title:'Blues', desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, ex.",price:90,img: 'item6', quantity: 0, inventory: 5}
],
}
const shopReducer = (state = INITIAL_STATE, action) => {
    switch (action.type){
        case "ADD_ITEM":
            return {
                ...state, 
                cart: [...state.cart, action.payload]
            }
        case "QTY_UP": 
            return Object.assign([], state.cart.map(item => {
                if (item.id === action.id){
                    console.log(item.quantity, item.inventory)
                    item.quantity += action.up
                    item.inventory -= action.down
                }
            return item
            }))
        case "QTY_DOWN":
            return Object.assign([], state.cart.map(item => {
                if(item.id === action.id){
                    item.quantity -= action.down
                    item.inventory += action.down
                }
                return item
            }))
        case "DELETE_ITEM":
            const item = action.payload.id
            const filtered = state.cart.filter(cart => (cart.id !== item))
            return {...state, cart: filtered }
        
        case "PURCHASE":
            const ids = action.cart.map(item => item.id)
            return Object.assign ([], state.map(item => {
                if(ids.includes(item.id)){
                    item.inventory -= action.cart.filter(p => p.id === item.id)[0].quantity
                }
                return item
                }))
        default: 
            return state
    }
}

export default shopReducer

当用户尝试将商品添加到购物车时，控制台日志显示未清除存储商品的“商品”数组，但屏幕显示空白页面且购物车未更新。非常感谢您的协助！

P.S：这是商店的副本，即使商店运作正常，但也许done做得不合法？

import {createStore, applyMiddleware} from 'redux';
import rootReducers from '../reducers/index';
import thunkMiddleware from 'redux-thunk';
import {createLogger} from 'redux-logger';

const logger = createLogger()
const store = createStore(rootReducers, {}, applyMiddleware(thunkMiddleware));

export default store;

使用Redux商店创建购物车

0 个答案: