mardi 12 octobre 2021

How can I update checkbox component 'checked' state in redux toolkit?

First of all I'm new to redux toolkit. What I want to do is to update the checkbox component state (checked) inside redux toolkit but it's not updating. I need to set a universal checkbox state because I need to use it inside the component and page.

This is what I'm doing:

const row = {
    data: [],
    isChecked: false,
    loading: false
}


export const rowSlice = createSlice({
    name: 'row',
    initialState: row,
    reducers: {
        ROW_CHECK: (state) => {
            state.isChecked = !state.isChecked
// I also tried state.isChecked = action.payload.isChecked after adding an action in the actions file 
// and using e.target.checked but looks like it doesn't work that way
        },

I tried a few things in the actions but none of them worked

[EDIT]

I dispatched the action inside the onChange event inside the component, it's working but changing the state for all checkboxes in all rows not just in one row

Action:

export const updateCheckbox = () => {
    return (dispatch) => {
        try {
            dispatch(
                rowAction.ROW_CHECK({
                    isChecked:(e)=>e.target.checked}
        ))
        } catch (e) {
            console.log("error: ", e)
        }
    }
}

Component:

export const Checkbox = () => {
    const dispatch = useDispatch()

    const isChecked = useSelector((state) => (
        state.isChecked
    ))

    return (
        <input type='checkbox' checked={isChecked} onChange={()=> {
            dispatch(updateCheckbox())
            console.log(isChecked)
        }}/>
    )
}



Aucun commentaire:

Enregistrer un commentaire