Функция React / Redux запускает действие и вторую функцию, но вторая функция получает старую информацию и находится на шаг позади

Question

Я создаю приложение для финансового планирования, используя React и Redux. Пользователь вводит информацию на ползунках диапазона, который автоматически обновляет диаграмму, давая им визуализацию их финансового положения. У меня есть одна функция, в которой пользователь указывает возраст, который он хотел бы начать собирать в доход своего социального обеспечения (он называется Канадским пенсионным планом или CPP}.

Когда пользователь перемещает полосу диапазона на свой пенсионный возраст,функция вызывается handleSetRangeBarValue, эта функция сначала запускает действие setPensionStartAge, которое перемещается в редуктор и обновляет переменные. Эти переменные необходимы для следующей запускаемой функции; CalculateCPP () (эта функция слишком велика для того, чтобы я мог ее опубликовать иобъясните все это здесь.) Рассчитайте CPP, затем покажите пользователю, каким будет его пенсионный доход. Затем пользователь увидит изменение двух значений: диапазон, на котором они меняют возраст, и изменение их CPP-платежа. ПроблемаТо есть, каждый раз, когда это запускает CalculateCPP, на один шаг позади. Пользователь увидит, что он установил возраст 67, но на дисплее для расчета CPP отображается информация для 66 лет. Независимо от того, что я пробовал CalculateCPP ()функциявсегда получать информацию о переменной редуктора из последнего обновления.

Я пробовал хакерские обходные пути, такие как передача переменных, непосредственно полученных из изменения диапазона, в CalculateCPP (), но CalculateCPP () опирается на несколько других значений, которые обновляются в редукторе, которые не просто приходятиз диапазона, так что не работает. Я также изменил функцию асинхронного ожидания, но это не работает. Я пытался написать это как функцию обещания, но не смог понять, как это сделать. У кого-нибудь есть предложения как с этим бороться? Нет получения каких-либо API. Все переменные локальны в редукторе.

handleSetRangeBarValue

handleSetRangeBarValue = (name, financialValue, rangeBarValue) => {
  this.props.setPensionStartAge(name, rangeBarValue)

  this.props.calculateCPP()
}

export const setPensionStartAge = (name, rangeBarValue) => {
  return {
    type: "SET_PENSION_AGE",
    payload: {
      name: name,
      rangeBarValue: rangeBarValue,
    },
  }
}

const initialState = {
  pensionAges: {
    cppStartAge: {
      name: "cppStartAge",
      label: "CPP Start Age",
      rangeBarValue: 65,
      min: 60,
      max: 70,
      step: 1,
      numberType: "age",
    },
    oasStartAge: {
      name: "oasStartAge",
      label: "OAS Start Age",
      rangeBarValue: 65,
      min: 65,
      max: 70,
      step: 1,
      numberType: "age",
    },
  },
}

const lifeTimeIncomeVariableState = (state = initialState, action) => {
  switch (action.type) {
    case "SET_PENSION_AGE":
      return {
        ...state,
        pensionAges: {
          ...state.pensionAges,
          [action.payload.name]: {
            ...state.pensionAges[action.payload.name],
            rangeBarValue: action.payload.rangeBarValue,
          },
        },
      }
    default:
      return state
  }
}