Operacje na tablicy ReactJS

Cześć,
Mam taką tablice:

Jest w niej cena oraz nazwa, na której chce wykonać pewne operacje, ale nie wiem jak się do niej dobrać. Gorąca prośba o pomoc.

Próbowałem tak, ale wywala błąd:

TypeError: Cannot read property 'StoreItems' of undefined

const StoreItems = require('../../dummyData/foods');

const initialState = {
    storeItems: StoreItems,
    basketNumbers: 0,
    cartCost: 0,
    products: []
}

this.StoreItems.map(person => (
       console.log(person.name)
)

Co według Ciebie ma robić this.StoreItems? Czym wg Ciebie jest this w tym kontekście?

Nie chce mi to coś działać, wyrzuca cał czas:

TypeError: Cannot read property 'forEach' of undefined

Prośba o pomoc.

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

const StoreItems = require('../../dummyData/foods');

const initialState = {
    storeItems: StoreItems,
    basketNumbers: 0,
    cartCost: 0,
    products: []
}

export default (state = initialState, action) => {
    switch(action.type){
        case ADD_PRODUCT_BASKET:
            let addQuantity = { ...state.StoreItems.forEach(p => p.name)[action.payload] }

            addQuantity.numbers += 1;
            addQuantity.inCart = true;
            console.log(addQuantity);

            return {
                ...state,
                basketNumbers: state.basketNumbers + 1,
                cartCost: state.cartCost + state.StoreItems.forEach(p => p.price)[action.payload],
                products: {
                    ...state.products,
                    [action.payload]: addQuantity,

                }
            }
            case GET_NUMBERS_BASKET:
                return {
                    ...state
                }
        default:
            return state;
    }
}

Link do całego projektu: https://[email protected]/marpus/projekt.git

Nie mieszaj typów importów - raz używasz ES6 modules a raz CommonJS:

// dummyData/food.js
export default dummyData;

// basketReducer.js
const StoreItems = require('../../dummyData/foods');

Powinno być:

// basketReducer.js
import StoreItems from '../../dummyData/foods'

Ewentualnie to powinno zadziałać (ale nie rób tak ogólnie, skoro już uzywasz modułów ES6):

// basketReducer.js
const StoreItems = require('../../dummyData/foods').default;

Btw, użyłeś forEach bez zrozumienia - o ile w poprzednim przykładzie jedyne co robiłeś to logowałeś dane, to tu potrzebujesz zwracanych wartości, więc map jest tu potrzebne.

PS
Nie wiem czy nie za wcześnie się bierzesz za frameworki.

Teraz załapałem, że to co robiłem z storeImage to było bez sensu i muszę do tablicy products, dodać wszystkie nazwy dań oraz ich ceny. Poprawiłem repozytorium na bitbucket. Generalnie nie chciałem do tablicy products przepisywać tego wszystkiego i stwierdziłem, że wyciągnę to z pliku z wszystkimi produkatmi i dodam to do products.

Generalnie robię to po kolei tak jak gościu na YouTube i akurat w tym miejscu zaczęło mi to działać inaczej niż jemu. Gdy kliknę dodaj do koszyka to w przeciwieństwie do gościa z YT nie dostaję w konsoli ładnej zawartości koszyka. Nie dostaję nawet wszystkich wartości. Dostaję tylko numbers z wartością NaN oraz inCart z wartościua true (akuat to się zgadza, bo po kliknieciu zmienia się na true, zeb było wiadomo, że jest w koszuku.

cartCost: state.cartCost + state.products[action.payload].price,

Z tego dostaję

TypeError: Cannot read property 'price' of undefined

pewnie dlatego, ze to string tak jak mówisz, natomiast mam dokładnie tak samo jak na filmiku.

A jeszcze dziwniejsza sprawa jest z nazwą, bo ta się wokóle nie wyświetla. Mimo, że jak wybiorę produkt i dodam do koszyka to w konsoli mi pokazuje nazwę produktu i jest ona prawidłowa.
I już sam nie wiem co mam źle skoro robię dokładnie tak samo jak na filmiku i mi nie działa.

Edit

Nawet VS Code pokazuje mi, ze price i number to jakas liczba :(