score:1

Accepted answer

you can get the entire data from the redux store for checkboxes.

reducer

let initialstate ={
    loading : false,
    products :[],
    singleproduct :{},
    error : '',
    checkboxes: [
    {name:"orange",ischecked:false},
    {name:"carrot",ischecked:false},
    {name:"apple",ischecked:false},
    {name:"potato",ischecked:false},
    {name:"avacados",ischecked:false}
    ]

}

 export const reducer = (state =initialstate , action) => {
    switch (action.type) {
       // earlier cases.
        case bigactions.update_checkboxes:
            return {
                ...state,
                checkboxes : action.payload
            }
           
            
       default: return state
    }
}

action

import axios from "axios";


// existing code...
export const update_checkboxes ="update_checkboxes";


// existing code...
export const updatecheckboxes = (checkboxes) => { // checkboxes should contain the updated checkboxes from handlechange.
   return (dispatch) => {
       dispatch({
           type: update_checkboxes,
           payload : checkboxes
       });
   };
};

sidenav component

const sidenav = () => {

    let dispatch = usedispatch();


    //get data from store
    const getdatafromstore = useselector((state)=>{
          return state.fetchallproducts;
    })
     
    //console.log(getdatafromstore.products);

   const [sidebar, setsidebar] = usestate(false);

    const [checkupdate, setcheckupdate] = usestate('')

   const {checkboxes} = getdatafromstore

   const showsidebar =() =>{
        setsidebar(true);
   }

    const handlecheckchnage =(e) =>{
        //console.log(e.target.value);
        var allcheckboxes = [...checkboxes];
        //console.log(allcheckboxes);
            allcheckboxes.foreach((cbox)=>{
                  if(cbox.name === e.target.value){
                      if(cbox.ischecked){
                          cbox.ischecked =false
                      }else{
                          cbox.ischecked = true
                      }
                  }
            })
              dispatch(allactions.updatecheckboxes(allcheckboxes));

              let defaultdata = [...getdatafromstore.products];

                 const filter = defaultdata.filter((newdata)=>{
                          //console.log(newdata);
                          if(e.target.value === newdata.name){
                             // console.log(newdata);
                             if(e.target.checked){
                                console.log(newdata);
                                setcheckupdate(newdata);
                               
                             }else if(!e.target.checked){
                                console.log(defaultdata);
                             }
                          }
                 })
              
    }

    const selectall =(e) =>{
        //console.log(e.target.checked);
        let newcheckboxes = [...checkboxes];
        if(e.target.checked){
            newcheckboxes.foreach((allbox)=>{
                  allbox.ischecked = true;
            })
        }else{
            newcheckboxes.foreach((allbox)=>{
                allbox.ischecked = false;
          })
        }
        dispatch(allactions.updatecheckboxes(newcheckboxes));
    }

    return (
        <react.fragment>
         <i classname="fas fa-align-justify yes" onclick={showsidebar} ></i>
            {
                sidebar &&
                <div classname="form-group mt-3">
                <label classname="mb-2 fw-bold">choose health</label> <br/>
                <input classname="form-check-input" type="checkbox" name="all" onchange={(e)=>{selectall(e)}} />
                <span style={{marginleft:'5px',fontweight:"bold"}}>all skils</span>
                 {
                      checkboxes.map((cb)=>
                      <div classname="form-check">
                     <label classname="form-check-label" >{cb.name}</label>
                    <input classname="form-check-input" type="checkbox" name="checking" value={cb.name} checked={cb.ischecked} onchange={(e)=>{handlecheckchnage(e)}} />
                  </div>
                  ) 
                 }
                </div>
            }
   
    
        </react.fragment>
    )
}

export default sidenav;

productlist

const productlist = () => {

      let dispatch = usedispatch();
      
      let getalldatafromserver = useselector((state)=>{
              return state.fetchallproducts;
      })
      
      const {checkboxes} = getalldatafromserver; // you'll get the checkboxes data here

   
        return (<dom></dom>)
        }


Related Query

More Query from same tag