In reduxjs/toolkit on first dispatch() action.payload is undefined, second dispatch() passes correct-CodePudding

I cannot figure out why on first dispatch() call data passed as prop which it then read by reducer is undefined, but when I instantly call dispatch() again it then passes proper value.

this is how store.ts is defined

import addEditLuxmedBenefitSystemsSlice from 'pages/edit-blind/redux/add-edit-benefits-slice';
import { PreloadedState } from 'redux';

export const reducer = combineReducers({
  addEditLuxmedBenefitSystemsSlice: addEditLuxmedBenefitSystemsSlice,
});
export type RootState = ReturnType<typeof reducer>;

export function setupStore(preloadedState?: PreloadedState<RootState>) {
  return configureStore({
    reducer,
    preloadedState,
  });
}

this is my slice:

import { createSlice } from '@reduxjs/toolkit';
import { LuxmedBenefitUserType, BenefitSystemsUserType } from '../types';

export const addEditLuxmedBenefitSystemsSlice = createSlice({
  name: 'addEditLuxmedSlice',
  initialState: [] as LuxmedBenefitUserType[],
  reducers: {
    addEditBenefits: (state, action) => {
      const { id } = action.payload;
      console.log(id);
      if (!state.length) {
        state.push(action.payload);
      }
    },
  },
});

export default addEditLuxmedBenefitSystemsSlice.reducer;

export const addEditLuxmedBenefitSystemsActions = addEditLuxmedBenefitSystemsSlice.actions;

And here how dispatch() is called in onSubmit funtion:

export const LuxmedBenefitComponent = () => {
  const { currentEditBlind } = useSelector((state: RootState) => state.editBlind);
  const { id, name, lastName, profileName } = currentEditBlind!;
  const userProps = { id, name, lastName, profileName };
  const [luxmedBenefitUser, setLuxmedBenefitUser] = useState<UserLuxmedBenefitType>();
  const [isFormSubmitted, setIsFormSubmitted] = useState<boolean>(false);

  const dispatch = useDispatch();

  const displayParagraphHandler = () => {
    setIsFormSubmitted(true);
    setTimeout(() => {
      setIsFormSubmitted(false);
    }, 4000);
  };

  const { values, handleChange, handleSubmit, resetForm } = useFormik({
    initialValues: {
      contractForm: '',
      userRelation: '',
      offerType: '',
      totalPrice: '',
      employerCost: '',
      employeeCost: '',
      comments: '',
    },
    onSubmit: (values) => {
      setLuxmedBenefitUser({ ...userProps, ...values });
      resetForm();
      displayParagraphHandler();
      dispatch(addEditLuxmedBenefitSystemsActions.addEditBenefits(luxmedBenefitUser));
    },
  });

CodePudding user response：

useState hooks are asynchronous.

Inside of onSubmit, you call setLuxmedBenefitUser and then try to use the newly updated luxmedBenefitUser. But, being asynchronous, it hasn't been updated yet.

Simply store the new value as it's own variable so that you can use it in both contexts:

    onSubmit: (values) => {
      const updatedLuxmedBenefitUser = {...userProps, ...values};
      setLuxmedBenefitUser(updatedLuxmedBenefitUser);
      resetForm();
      displayParagraphHandler();
      dispatch(addEditLuxmedBenefitSystemsActions.addEditBenefits(updatedLuxmedBenefitUser));
    },