yabna
yabna

Reputation: 99

how do you change a boolean value thats stored on Redux on an onClick function?

I am trying to do a very simple change state on Redux with an onClick event stored on one of my components but I can't seem to figure it out. I have my logic, action, and container in redux all set up.

CONTAINER:

export const ReportTableContainer = connnect((state) =>({
    isOpen: state.app['modal-status']['isOpen']
}),() =>({FetchPopupReport}))(ReportTable)

FUNCTION ON COMPONENT:

onCellSelect = ({idx, rowIdx}) => {
    if(idx <= 2 && idx > 0){
        //where I want to change the state from false to true
    }else if(idx > 2){
        console.log('passed')
    }
}

REDUX FILE:

export const logic = createLogic({
    type: FetchRoiReport,
    process({ getState, action, api}, dispatch, done) {
        dispatch(ModalStatus({isOpen: false}))
        dispatch(Loading({report: true}));
        api.get(URL)
        .then(obj => {
            dispatch(Loading({isOpen: false}));
            dispatch(FetchRoiReportSucceeded(obj))
            dispatch(ModalStatus({isOpen: false}));
            done();
        }).catch(err => {
            dispatch(Loading({isOpen: false}));
            dispatch(ModalStatus({status: false}));
            dispatch(FetchRoiReportFailed("ERROR"));
            done();
        })
        }
    });

I just want the .then() to be changed to true

Upvotes: 0

Views: 1173

Answers (1)

Deborah Joshi
Deborah Joshi

Reputation: 36

I think you would have to call an action from the place you want to change the redux state that would be dispatched on the store and the reducer would be called that would eventually change the state to 'true' and then your components render would be called.

like in your current 'redux' file FetchRoiReport action is handled and then it dispatches Loading, FetchRoiReportSucceeded, ModalStatus when needed. The reducer has to handle these actions and mutate the state (by creating new state)

Upvotes: 1

Related Questions