Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

186
Views
State of my application is not working properly

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

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!