MazMat
MazMat

Reputation: 2094

Overwriting array of objects instead of updating it

Im currently learning redux and trying few options out. Everything looks okay until I want to update one state in the array of objects.

I'm dispatching 5 actions in total now, first 2 setting longitutde and latitude for one part of the state using one reducer, then I set IDs with other reducer and finally when I want to update one of the objects in the array I update one but delete the other somehow.

My file looks like this:

    const demoState = {
        renderedDrugs: [
            {
                id: '',
                drugId: '',
                price: undefined
            }
        ],
        apt: {
            latA: '',
            lonA: ''
        }
    }

    //SET_ID
    const setId = (id, drugId) => ({
        type: 'SET_ID',
        renderedDrugs: {
            id,
            drugId
        }
    })

    //SET_PRICE
    const setPrice = (drugId, price) => ({
        type: 'SET_PRICE',
        drugId,
        price
    })

    //RENDERED DRUGS REDUCER
    const renderedDrugsReducerDefState = [];

    const renderedDrugsReducer = (state = renderedDrugsReducerDefState, action) => {
        switch (action.type) {
            case 'SET_ID':
                return [
                ...state,
                action.renderedDrugs
                ]
            case 'SET_PRICE':
                return state.map((drug) => {
                    if (drug.drugId === action.drugId) {
                        return {
                            ...drug,
                            ...action.price
                        }
                    }
                })
            default:
                return state;
        }
    }


    //SET_LAT
    const setLat = (latA) => ({
        type: 'SET_LAT',
        latA
    })
    //SET_LON
    const setLon = (lonA) => ({
        type: 'SET_LON',
        lonA
    })

    //APT REDUER

    const aptReducerDefState = []

    const aptReducer = (state = aptReducerDefState, action) => {
        switch (action.type) {
            case 'SET_LAT':
                return {
                    ...state,
                    latA: action.latA
                }
            case 'SET_LON':
                return {
                    ...state,
                    lonA: action.lonA
                }
            default:
                return state;
        }
    }


    //STORE CREATION
    const store = createStore(
        combineReducers({
            renderedDrugs: renderedDrugsReducer,
            apt: aptReducer
        })
    )

    store.subscribe(() => {
        console.log('store', store.getState());
    })

    store.dispatch(setLat(88));
    store.dispatch(setLon(78));

    store.dispatch(setId(uuid(), 3));
    store.dispatch(setId(uuid(), 35));

    store.dispatch(setPrice(35, {price: 400}));

I assume the SET_PRICE action is at fault, but I tried various configurations and cant figure out the issue so thats why I posted the whole file, if thats unnecessary let me know and I will delete irrelevant bits.

Console log after 4th dispatch:

{renderedDrugs: Array(2), apt: {…}}
apt
:
{latA: 88, lonA: 78}
renderedDrugs
:
Array(2)
0
:
{id: "2a3c4bca-610a-4554-b7e3-695ae6e30ae7", drugId: 3}
1
:
{id: "48df057a-c8f1-4138-8db7-6268f7508ccb", drugId: 35}
length
:
2
__proto__
:
Array(0)
__proto__
:
Object

and aftr 5th

{renderedDrugs: Array(2), apt: {…}}
apt
:
{latA: 88, lonA: 78}
renderedDrugs
:
Array(2)
0
:
undefined
1
:
{id: "48df057a-c8f1-4138-8db7-6268f7508ccb", drugId: 35, price: 400}
length
:
2
__proto__
:
Array(0)
__proto__
:
Object

Upvotes: 1

Views: 52

Answers (1)

jonahe
jonahe

Reputation: 5000

The .map doesn't return the unchanged objects for the items your're not updating. Adding a return should fix it:

return state.map((drug) => {
                if (drug.drugId === action.drugId) {
                    return {
                        ...drug,
                        ...action.price
                    }
                }
                return drug; // this was missing before, so the return was undefined
            })

Upvotes: 1

Related Questions