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