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

【问题标题】：How to refresh component after state update in React-redux如何在 React-redux 中状态更新后刷新组件
【发布时间】：2020-01-27 05:34:27
【问题描述】：

我正在使用带有 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 连接了 action 到 state 我猜它工作正常，因为我在商店里得到数据就好了，下面是动作生成器的样子

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'}
/>

【问题讨论】：

标签： javascript react-native redux react-redux

【解决方案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 更改时，组件都会重新渲染，所以不用担心。

【讨论】：