1

I am trying to create toggle switch in my application and i am new to redux. Posting this question after trying very hard and looking eveywhere online.Please help. My Reducer is below:

const initialState = {
    preview: "off",
    cards:
};

const cardReducer = (state = initialState, action) => {
        switch (action.type) {

            case "FIND_ALL_CARDS":
                return {
                    cards: action.cards
                };
            case "DELETE_CARD":
                return {
                    cards: state.cards.filter(card => card.id !== action.cardId)
                };
            case "CREATE_CARD":
                return {
                    cards: [...state.cards, action.card]
                };
            case "PREVIEW":
                console.log(state); // I get cards[] in the state but no preview.
                let swtch = "on";
                if (state.preview === "on") {
                    swtch = "off";
                }
                console.log(state.preview); // Undefined 

                return {
                    cards: state.cards,
                        preview: swtch
                };
            default:
                return state;
        }

I have connected properly in my component 

const stateToPropertyMapper = state => ({
  cards: state.cards.cards,
  preview: state.cards.preview
});

I get undefined for the first time i toggle the switch but after first toggle i get the state. Please help me on this enter image description here

reactdontact
  • 53
  • 1
  • 10
  • 2
    `let swtch = "on"` why not `isSwitchOn = true`? Better yet, why do you even have `swtch` at all? Just return `preview: !state.preview`. Your state value is a boolean so why are you comparing it to a string? – JMadelaine Feb 21 '20 at 08:25
  • I have edited. I have tried doing that as well. For the first time the state : preview is undefined but i get "on" , "off" in my console after clicking the toggle switch again – reactdontact Feb 21 '20 at 08:27
  • added pic of my console. any insight please @JMadelaine – reactdontact Feb 21 '20 at 08:32

1 Answers1

2

Basically from reducer you are returning a COPY of your state, and when you return {cards: []}, you are losing all of the rest props from the state. When you are mutating state in FIND_ALL, DELETE and Create CARD you need to return rest part of the state as well. Edit like this 

case "FIND_ALL_CARDS":
    return {
        ...state
        cards: action.cards
     };

Do it in all actions, dont forget to pass previous prop of state when u mutate single one

Andon Mitev
  • 1,354
  • 1
  • 11
  • 30
  • Thanks, but my issue is on the case : "PREVIEW" . Right now there is no method dispatching "FIND_ALL_CARDS". I will correct that anyway. Kindly help – reactdontact Feb 21 '20 at 08:37
  • Yup but if before that you have FIND_ALL_CARDS or something with CARD, you are removing preview from the state, and then when you are toggle review is undefined – Andon Mitev Feb 21 '20 at 08:39