React and Redux - update status with button

Asked

Viewed 107 times

-2

I have a button on my app that opens a Modal. I’m implementing Redux in the application, and now I’m not knowing how to make the button work again. I’m using a fixed state while still learning to use the better Redux.

This is the return I’m using:

import { combineReducers } from 'redux'

const rootReducer = combineReducers({
    lista: () => ({
        tarefas: [{
            nomeTarefa: 'teste redux',
            subtarefa: [{
                _id: 1,
                nomeSub: 'teste redux dnv',
                status: false
            },
            {
                _id: 2,
                nomeSub: 'hmmsw',
                status: true
            }],
            data: [{
                dia: 2,
                mes: 4,
                ano: 2020
            }],
            completas: 1,
            incompletas: 1
        }]

    }),
    modal: () => ({
        show: false
    })
})

export default rootReducer

The actions I want to update the "show" attribute (this is the file that is giving error):

export const handleModal = event => ({
    type: 'ABRIR_MODAL',
    payload: { ...lista, show:true }
})

export const closeModal = event => ({
    type: 'FECHAR_MODAL',
    payload: { ...lista, show:false }
})

The return of actions:

const INITIAL_STATE = { show: false, tarefas: [] }

export default (state = INITIAL_STATE, action) => {
    switch(action.type) {
        case 'ABRIR_MODAL':
            return { ...state, show: action.payload }
        case 'FECHAR_MODAL':
            return { ...state, show: action.payload }     
        default:
            return state
    }
}

And the mistake I’m getting: [1

1 answer

-1

Tip: By default, codar is attempted in English !!!

export const handleModal = event => ({
    type: 'ABRIR_MODAL',
    payload: { ...lista, show:true } // remover "...lista"
})

export const closeModal = event => ({
    type: 'FECHAR_MODAL',
    payload: { ...lista, show:false } // remover "...lista"
})
export default (state = INITIAL_STATE, action) => {
    switch(action.type) {
        case 'ABRIR_MODAL':
            return { ...state, show: action.payload } // action.payload.show
        case 'FECHAR_MODAL':
            return { ...state, show: action.payload } // action.payload.show
        default:
            return state
    }
}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.