Question

我正在将React-Redux与thunk一起使用。我的动作生成器通过thunk启动对API的调用，然后按预期状态接收数据。当我从API获得数据后，我想在useEffect函数中调用动作生成器，以更新视图中的饼图。但是我不知道该怎么做。由于在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

您可以执行以下操作：

调度thunk-api调用。
成功响应后，请分派另一个操作，以使用api调用的响应来更新redux存储。
在您的组件中，从步骤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发生更改，组件都将重新呈现，因此不必担心。

在React-redux中更新状态后如何刷新组件

1 个答案: