Why can't the data that is stored in the store be redefined inside a function that is declared in a React component?

Question

React

there is a reducer:

const initState = Immutable.fromJS({
  isConfirmation: false
});

export default function auth(state = initState, action) {
  switch (action.type) {
    case actions.SET_AUTH_SUCCESS: {
      return state.merge({
        isConfirmation: true,
      });
    }

    default:
      return state;
  }
}

uses redux-thunk for the middleware and has action creators that changes the isConfirmation variable:

setAuth: body => async (dispatch) => {
  try {
    const { data } = await fetch(body);
    dispatch({
      type: actions.SET_AUTH_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: actions.SET_AUTH_FAILURE,
    });
  }
}

there is a React component:

const Auth = (props) => {
  const { isConfirmation } = props;

  const handleSubmit = async () => {
    await setAuth()
    console.log(isConfirmation)
  }
  return (
    <button onClick={handleSubmit} />
  )
}

in the scope of handleSubmit , after the action creators - setAuth() is executed, isConfirmation remains false, but in the scope of the component isConfirmation changes immediately, why are the changes not reflected in the handleSubmit function?

Answer 1

probably because const { isConfirmation } = props;it happens during rendering,
and re-rendering occurs after exiting handleSubmit(), that is, in the handleSubmit, there are still old props and even the previous isConfirmation