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

Question

I am using React-Redux with a thunk. My action generator initiates a call to API and via thunk and then receives the data in state as expected. I call the action generator in useEffect function, once I have the data from API I want to update a piechart that I have as a view. But I am not able to figure out how to do it. Since I load the data from state to the array (data source to a pie chart) after API call is successful and data is in the state.

Kindly suggest below is the code in question.

  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);
  }

  };

I have connected actions through redux function connect and props to state as well which I guess is working fine as I get the data in the store just fine, below is how the action generator looks like

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

The only question is how to refresh the component so that my piechart gets updated

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

Answer 1

You can do this:

1. Dispatch a thunk-api call.
2. On successful response, dispatch another action that updates the redux store with the response of the api call.
3. In your component, connect to the redux state from step 2.

As such, whenever you dispatch another thunk-api call, the redux store will be updated on successful response, which in turn, will update your component.

Hope this makes sense.

eg

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)
})

Now, you have the data to do whatever you want to do. Also, the component will be re-rendered whenever the data changes, so no worries there.