与 redux 购物车反应原生

Question

Am trying to create a shopping cart in react native, my problem is whenever i add a product to the shopping cart it is added through the following action:

export const addToCart =  (item) => {
    return (dispatch) =>{
        dispatch({
            type:ADD_TO_CART, 
            payload: {item}});        
      }             
}

this is the reducer:

import {REMOVE_FROM_CART,ADD_TO_CART,UPDATE_CART_QUANTITY,GET_CATEGORIES, GET_PRODUCTS,
     MODAL_STATE,MODAL_STATE_HIDE,ADDRESS_CHANGED,SELECTED_ITEMS} from  '../actions/types';

const INITIAL_STATE = {
    products:'',
    cart:[],
    category:'',
    isVisible:false,
    address:'',
    selectedItem:[]
}

export default function(state=INITIAL_STATE, action){
    let cart = state.cart;
    switch(action.type){
        case ADD_TO_CART:
            return{...state, cart:[...state.cart, action.payload]}
        case REMOVE_FROM_CART:
            return{cart:[...state.cart.filter(item => item.id != action.payload)]}
            // {...state, cart:[...state.cart.filter((id)=>{ id !== action.payload})]}
       case UPDATE_CART_QUANTITY:
        return {
            ...state,
            cart: state.cart.map(cart=> cart.id === action.payload.item.id ?
             { ...cart, quantity: action.payload.value} :
              cart
            )
          };
        case GET_CATEGORIES:
            return{...state, category:action.payload}
         case GET_PRODUCTS:
                return{...state, products:action.payload}
        case MODAL_STATE:
            return{...state, isVisible:true}
         case MODAL_STATE_HIDE:
                return{...state, isVisible:false}
        case ADDRESS_CHANGED:
            return{...state, address:action.payload}
        case SELECTED_ITEMS:
            return{...state, selectedItem:[...state.selectedItem, action.payload]}
        default:
            return state
    }
}

BUT when i try to access the cart through mapping state to props in the cart component, it returns undefined is not an object, when console log typeof(cart) from cart component it says its an object:

this is the mapstatetoprops function:

const mapStateToProps = (state) => {
    return{
        cartItems:state.product_reducer.cart,
        modalValue:state.product_reducer.isVisible,
        total: state.product_reducer.cart.reduce(
          in the array
          (accumulatedTotal, cartItem) =>
            accumulatedTotal + cartItem.price * cartItem.quantity,
          0 
        )
    }


}

this is the json product data that i add to the cart there are two products with 7 and 8 as ids:

{
    "product": [
        {
            "id": 8,
            "name": "asad",
            "quantity": 1,
            "type": "already",
            "description": null,
            "price": "20000.00",
            "ingredients": null,
            "deliveryfee": "0.00",
            "supplier": null,
            "duration": "3",
            "category_id": 3,
            "created_at": "2020-05-03 15:03:23",
            "updated_at": "2020-05-03 15:03:23",
            "deleted_at": null,
            "photo": {
                "id": 19,
                "model_type": "App\\Product",
                "model_id": 8,
                "collection_name": "photo",
                "name": "5eaedd370c100_jamies-iced-green-tea",
                "file_name": "5eaedd370c100_jamies-iced-green-tea.jpg",
                "mime_type": "image/jpeg",
                "disk": "public",
                "size": 36610,
                "manipulations": [],
                "custom_properties": {
                    "generated_conversions": {
                        "thumb": true
                    }
                },
                "responsive_images": [],
                "order_column": 19,
                "created_at": "2020-05-03 15:03:24",
                "updated_at": "2020-05-03 15:03:24",
                "url": "http://192.168.0.112/kwenu/storage/app/public/19/5eaedd370c100_jamies-iced-green-tea.jpg",
                "thumbnail": "http://192.168.0.112/kwenu/storage/app/public/19/conversions/5eaedd370c100_jamies-iced-green-tea-thumb.jpg"
            },
            "sliderimages": [],
            "tags": [
                {
                    "id": 1,
                    "name": "Avocado",
                    "supplier": null,
                    "created_at": "2020-04-23 09:35:00",
                    "updated_at": "2020-04-23 09:35:00",
                    "deleted_at": null,
                    "picture": [],
                    "pivot": {
                        "product_id": 8,
                        "product_tag_id": 1
                    },
                    "media": []
                },
                {
                    "id": 2,
                    "name": "cushew",
                    "supplier": "Fruit Salads",
                    "created_at": "2020-04-27 13:03:35",
                    "updated_at": "2020-04-27 13:03:35",
                    "deleted_at": null,
                    "picture": [],
                    "pivot": {
                        "product_id": 8,
                        "product_tag_id": 2
                    },
                    "media": []
                }
            ],
            "media": [
                {
                    "id": 19,
                    "model_type": "App\\Product",
                    "model_id": 8,
                    "collection_name": "photo",
                    "name": "5eaedd370c100_jamies-iced-green-tea",
                    "file_name": "5eaedd370c100_jamies-iced-green-tea.jpg",
                    "mime_type": "image/jpeg",
                    "disk": "public",
                    "size": 36610,
                    "manipulations": [],
                    "custom_properties": {
                        "generated_conversions": {
                            "thumb": true
                        }
                    },
                    "responsive_images": [],
                    "order_column": 19,
                    "created_at": "2020-05-03 15:03:24",
                    "updated_at": "2020-05-03 15:03:24",
                    "url": "http://192.168.0.112/kwenu/storage/app/public/19/5eaedd370c100_jamies-iced-green-tea.jpg",
                    "thumbnail": "http://192.168.0.112/kwenu/storage/app/public/19/conversions/5eaedd370c100_jamies-iced-green-tea-thumb.jpg"
                }
            ]
        },
        {
            "id": 7,
            "name": "Fruity",
            "quantity": 1,
            "type": "own",
            "description": null,
            "price": "18000.00",
            "ingredients": null,
            "deliveryfee": "0.00",
            "supplier": null,
            "duration": "1",
            "category_id": 2,
            "created_at": "2020-05-03 11:06:52",
            "updated_at": "2020-05-03 11:06:52",
            "deleted_at": null,
            "photo": {
                "id": 18,
                "model_type": "App\\Product",
                "model_id": 7,
                "collection_name": "photo",
                "name": "5eaea5c67a659_grilledchicken",
                "file_name": "5eaea5c67a659_grilledchicken.jpg",
                "mime_type": "image/jpeg",
                "disk": "public",
                "size": 13069,
                "manipulations": [],
                "custom_properties": {
                    "generated_conversions": {
                        "thumb": true
                    }
                },
                "responsive_images": [],
                "order_column": 18,
                "created_at": "2020-05-03 11:06:53",
                "updated_at": "2020-05-03 11:06:56",
                "url": "http://192.168.0.112/kwenu/storage/app/public/18/5eaea5c67a659_grilledchicken.jpg",
                "thumbnail": "http://192.168.0.112/kwenu/storage/app/public/18/conversions/5eaea5c67a659_grilledchicken-thumb.jpg"
            },
            "sliderimages": [],
            "tags": [
                {
                    "id": 1,
                    "name": "Avocado",
                    "supplier": null,
                    "created_at": "2020-04-23 09:35:00",
                    "updated_at": "2020-04-23 09:35:00",
                    "deleted_at": null,
                    "picture": [],
                    "pivot": {
                        "product_id": 7,
                        "product_tag_id": 1
                    },
                    "media": []
                },
                {
                    "id": 2,
                    "name": "cushew",
                    "supplier": "Fruit Salads",
                    "created_at": "2020-04-27 13:03:35",
                    "updated_at": "2020-04-27 13:03:35",
                    "deleted_at": null,
                    "picture": [],
                    "pivot": {
                        "product_id": 7,
                        "product_tag_id": 2
                    },
                    "media": []
                }
            ],
            "media": [
                {
                    "id": 18,
                    "model_type": "App\\Product",
                    "model_id": 7,
                    "collection_name": "photo",
                    "name": "5eaea5c67a659_grilledchicken",
                    "file_name": "5eaea5c67a659_grilledchicken.jpg",
                    "mime_type": "image/jpeg",
                    "disk": "public",
                    "size": 13069,
                    "manipulations": [],
                    "custom_properties": {
                        "generated_conversions": {
                            "thumb": true
                        }
                    },
                    "responsive_images": [],
                    "order_column": 18,
                    "created_at": "2020-05-03 11:06:53",
                    "updated_at": "2020-05-03 11:06:56",
                    "url": "http://192.168.0.112/kwenu/storage/app/public/18/5eaea5c67a659_grilledchicken.jpg",
                    "thumbnail": "http://192.168.0.112/kwenu/storage/app/public/18/conversions/5eaea5c67a659_grilledchicken-thumb.jpg"
                }
            ]
        }
    ]
}

THE PROBLEM IS INSTEAD OF STATE RETURNING cart AS AN ARRAY OF OBJECTS, IT RETURNS AN OBJECT OF OBJECTS, THANK YOU IN ADVANCE

Answer 1

i see addToCart action take the payload as an object { item } and you try to access in reducer by action.payload without item

so you can change

case ADD_TO_CART:
            return{...state, cart:[...state.cart, action.payload.item]}

Or just update add to cart to be like so && all actions should be same

export const addToCart =  (payload) => {
    return (dispatch) =>{
        dispatch({
            type:ADD_TO_CART, 
            payload    
      }             
}

Answer 2

Fixed it by changing the name of the cart array in the reducer from

const INITIAL_STATE = {
    products:'',

cart:[],

    category:'',
    isVisible:false,
    address:'',
    selectedItem:[]
}

to:

const INITIAL_STATE = {
    products:'',

carts:[],

    category:'',
    isVisible:false,
    address:'',
    selectedItem:[]
}

and the creating a class function for rendering the items in the cart component which i supplied to the renderitem function in the flatlist now the cart returns an array of objects. THANK YOU MUSTAFA FOR YOUR CONCERN