如何在 React-redux 中狀態更新后刷新組件

Question

我正在使用帶有 thunk 的 React-Redux。 我的動作生成器通過 thunk 啟動對 API 的調用，然后按預期接收狀態中的數據。 我在 useEffect 函數中調用動作生成器，一旦我從 API 獲得數據，我想更新我作為視圖的餅圖。 但我不知道該怎么做。 由於我在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);
  }

  };

我已經通過 redux 函數 connect 和 props 將動作連接到狀態，我猜這工作正常，因為我在商店中獲取數據就好了，下面是動作生成器的樣子

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

唯一的問題是如何刷新組件以便我的餅圖得到更新

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

Answer 1

你可以這樣做：

1. 發送 thunk-api 調用。
2. 成功響應后，調度另一個操作，使用 api 調用的響應更新 redux 存儲。
3. 在您的組件中，連接到步驟 2 中的 redux 狀態。

因此，每當您調度另一個 thunk-api 調用時，redux 存儲將在成功響應時更新，進而更新您的組件。

希望這是有道理的。

例如

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發生變化，組件就會重新渲染，所以不用擔心。