1

I am creating delete functionality in my application. But somehow it is not behaving properly.

The initial state and reducer function is defined below:

import { createSlice } from '@reduxjs/toolkit';

const filterDataTemplate = {
  programId: '',
  year: '',
};

const initialState = {
   //some other state
  filterData: { ...filterDataTemplate },
};

const slice = createSlice({
  name: 'editFilterSlice',
  initialState: initialState,
  reducers: {    
    updateFilterProgramId: (state, action) => {
      return {
        ...state,
        filterData: {
          ...state.filterData,
          programId: action.payload,
        },
      };
    },
    updateFilterYear: (state, action) => {
      return {
        ...state,
        filterData: {
          ...state.filterData,
          year: action.payload,
        },
      };
    },    
  },
});

export const {
  updateFilterYear,
  updateFilterProgramId, 
} = slice.actions;

export default slice.reducer;

And filter details is the object containing year and programId:

filterDetails: {year:2021, programId: "Ameria"}

And i want to achieve

filterDetails: {year:"", programId: ""}

So delete handler is stated below to achieve above criteria:

const handleDelete = (e) => {    
    e.preventDefault();
    if (//some condition) {
      dispatch(updateFilterYear(''));
      console.log('filterdetails', filterDetails); 
      //filterDetails: {year:2021, programId: "Ameria"}
    } else {
      dispatch(updateFilterProgramId(''));  
    }
}.

//Outside handleDelete function
console.log('filterdetails', filterDetails); 
//filterDetails: {year:"", programId: "Ameria"}

So filter details containg year and programId is obtained with the help of this code:

const filterDetails = useAppSelector(
   (state) => state.locationsFilter.filterData
 );

handleDelete function is getting called properly when I am clicking a button

But after running this code, the filter details is not updating first time but when I am again running the handler second time it is updating. And outside handleDelete it is showing correct value in the console but inside handleDelete console is showing correct value second time.

It is showing very strange behavior

Swapnil Chaturvedi
  • 97
  • 2
  • 11
  • 1
    How is that state being used? I am not sure the state handling is incorrect but the rendering of it instead. – geisterfurz007 Feb 07 '22 at 05:46
  • 1
    I don't think the `console.log` immediately after the dispatch will show the new value of `filterDetails`; that would require a re-render of your component. If you want to catch that value changing, use an effect hook – Phil Feb 07 '22 at 05:49
  • Not directly related, but RTK ships with immer. You can do `state.filterData.year= action.payload` and make things vastly clearer. – OFRBG Feb 07 '22 at 05:50
  • @Phil yes this is the issue, i want my value immediately after dispatch. So how can i use with useEffect and catch that value – Swapnil Chaturvedi Feb 07 '22 at 05:55
  • Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/q/54069253/283366) – Phil Feb 07 '22 at 05:57
  • I understood @Phil. But can you show me how will i write so that i get the updated state just after dispatch in reference to my code – Swapnil Chaturvedi Feb 07 '22 at 06:32
  • Do you not see the `useEffect()` call in the [accepted answer](https://stackoverflow.com/a/54069332/283366)? – Phil Feb 07 '22 at 06:38

0 Answers0