Создайте корзину покупок с помощью redux store

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, а затем сопоставляет возвращенный массив, помещая каждый объект на «Карту» . **

Пока мои действия 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
    }
}

Действия, описанные выше, должны выполнять следующие команды:

1. addItem: When при щелчке по карте добавить товар в список массивов (cart [])
2. deleteFromCart: удалить товар из корзины
3. amountUp: как только пользователь добавит товар в корзину, увеличьте количество предмета и уменьшите инвентарь
4. количество Вниз: очень похоже на (3), увеличьте инвентарь, уменьшите количество
5. Покупка: в основном последняя остановка для пользователя, которая позволяет им приобрести элементы, которые они запрашивают (массив корзины)

Редукторы для этих действий описаны здесь:

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

Когда пользователь пытается добавить элемент в корзину, журнал консоли показывает, что массив «items», в котором хранятся продукты, не очищен, но на экране отображается пустая страница, а корзина не обновляется. Любая помощь приветствуется, спасибо!

PS: Вот копия магазина, хотя он работает нормально, но, возможно,… сделали что-то незаконное?

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;