Как обновить компонент sh после обновления состояния в React-redux

Question

Я использую React-Redux с Thunk. Мой генератор действий инициирует вызов API и через thunk, а затем получает данные в ожидаемом состоянии. Я вызываю генератор действий в функции useEffect. Когда у меня есть данные из API, я хочу обновить круговую диаграмму, которая у меня есть в виде представления. Но я не могу понять, как это сделать. Так как я загружаю данные из состояния в массив (источник данных в таблицу ap ie) после успешного вызова API и данных в состоянии.

Пожалуйста, ниже приведен код, о котором идет речь.

  useEffect(()=> {
    const reqData = {
      "customerId" : "5",
      "month" : "12",
      "year" : "2019"
    };
    initCategoryExpInfo(reqData,()=>{
      initPieChartData();
    });
  },[navigation,initCategoryExpInfo]);


  ......

  const initPieChartData = () => {
  for(i = 0;i < categoryExpenses.length;i++) {
    var item = categoryExpenses[i];
    series.push(item.expenseAmount);
  }

  };

Я подключил действия через функцию редукса connect и props to state также, что, я думаю, работает нормально, так как я получаю данные в хранилище просто отлично, ниже показано, как генератор действий выглядит как

export const performGetAllExpensesByCat = (reqData,callback) => (dispatch, _, {api}) => {
  return getAllExpensesByCat(api)(reqData).then(res => {
    console.log(res.data);
    dispatch(setExpensesByCat(res));
    callback();
  });
};

Единственный вопрос - как обновить sh компонент, чтобы моя круговая диаграмма обновлялась

<PieChart
    chart_wh={chart_wh}
    series={series}
    sliceColor={sliceColor}
    doughnut={true}
    coverRadius={0.7}
    coverFill={'#FFF'}
/>

Answer 1

Вы можете сделать это:

1. Отправка вызова thunk-api.
2. При успешном ответе отправьте еще одно действие, которое обновляет хранилище избыточности с ответом на вызов API.
3. В вашем компонент, подключитесь к состоянию избыточности с шага 2.

Таким образом, всякий раз, когда вы отправляете другой вызов thunk-api, хранилище избыточностей будет обновляться при успешном ответе, что, в свою очередь, обновит ваш компонент .

Надеюсь, это имеет смысл.

например,

useEffect(()=>{
    // thunk action dispatcher for the api call on component mount
    fetchDataFromApiCall()
}, [])

// In the action generator file
fetchDataFromApiCall() => {
    return async (dispatch, getState) => {
        await actualApiCall().then((response)=>{
            dispatch(updateReduxState(response))
        }

// In your component
mapStateToProps = (state) => ({
    data: getDataFromReduxState(state)
})

Теперь у вас есть data, чтобы делать то, что вы хотите. Кроме того, компонент будет перерисовываться всякий раз, когда меняется data, поэтому не стоит беспокоиться.