1

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

1 Answer 1

1

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
            })
Sign up to request clarification or add additional context in comments.

2 Comments

Youre obviously right, I got lost in the sea of returns and missed one... Thank you!
No problem! It's easy miss small details like that when you've been staring at the same code for a while. I've been there many times :D

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.