react redux reducer

Question

Witam, mam problem ze zmianą stanu w reducer, mam taki kod który działa, ale chyba nie tak powinienem zmieniać stan, proszę o pomoc. Chodzi o case DISPALY_DETAIL. Chodzi o to, że może być tylko jeden element true, wiec zmieniam wszystkie na false i potem nadpisuje ten wybrany na true.

const initItem = {
    items: [
        {
            title: 'Get out of bed',
            id: 1,
            selected: true,
            detail: {
                time: '16:30',
                date: '24.08.2020'
            }
        },
        {
            title: 'Walk the dog',
            id: 2,
            selected: false,
            detail: {
                time: '12:30',
                date: '19.09.2020'
            }
        }
    ],

}



const itemReducer = (state = initItem, action) => {

    switch (action.type) {
        case 'DELETE':
            console.log(action);
            let newItems = state.items.filter(item => {
                return item.id != action.id
            })
            return {
                ...state,
                items: newItems
            }
        case 'DISPLAY_DETAIL':
            console.log(action.id);
            const newDetail = state.items.map(item => {
                item.selected = false;
                if (item.id === action.id) {
                    item.selected = true;
                }
            })


    }
    return state
}

export default itemReducer

proszę o pomoc

Comments

Możesz szerzej opisać co chcesz zrobić w tym case?

---

Tylko jeden z obiektów w tablicy items może mieć selected :true. w zwiazku z tym zmieniam w tym case wszystkie elementy na false a potem nadpisuję  ten jeden który własnie ma selected:true 

item.selected = false;
                if (item.id === action.id) {
                    item.selected = true;
                }

ale chyba w ten sposób nie powinno się zmieniać stanu....

Answer 1

Jeśli chcesz mieć jeden element który ma jakiś atrybut selected a cała reszta ma mieć ten atrybut w tym samym czasie ustawiony na false, to dla mnie to jest bez sensu... Nie prościej zrobić nową zmienna w reduxie, nazwać ją selectedItem i wrzucać do niej Id wybranego przedmiotu?

Comments

możesz podać przykłąd kodu? nie bardzo rozumiem

---

const initItem = {
    items: [...],
    selectedItem: null
}
 
 
 
const itemReducer = (state = initItem, action) => {
 
    switch (action.type) {
            ...
            'SET_SELECTED_ITEM'...
    }
    return state
}
 
export default itemReducer

 

---

dzieki bardzo, teraz wydaje mi się to oczywiste.....