当我在 useEffect 中使用 useDispatch 时，我的组件继续渲染

Question

当我在我的反应组件中使用如下分派时，我的组件保持渲染。 我怎样才能避免这种情况？

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(reportsActionCreators.changeSalesDashboardData(someData));
  }, []);

在父组件中，我使用的是 useSelector。 但没有使用这份报告的数据。

  const { selectedSalesTab } = useSelector<RootState, any>((state: RootState) => {
  return {
    selectedSalesTab: state.reports.selectedSalesTab,
  };

这是我正在使用的父组件。

const SalesReports: FC = () => {
  const dispatch = useDispatch();
  const { selectedSalesTab } = useSelector<RootState, any>((state: RootState) => {
    return {
      selectedSalesTab: state.reports.selectedSalesTab,
    };
  });

  const getPageContent = useMemo(() => {
    switch (selectedSalesTab) {
      case salesReportsTabs[0].id:
        return <Dashboard />;
      default:
        return <div>not found :(</div>;
    }
  }, [selectedSalesTab]);

  return (
    <div className="sales-report-wrapper">
      <GTTabs
        id="sales-reports-tabs"
        onClickTab={(tab: Tab) => dispatch(reportsActionCreators.changeSalesTab(tab.id))}
        tabs={salesReportsTabs}
        defaultSelectedTabId={selectedSalesTab}
      />
      <div>{getPageContent}</div>
    </div>
  );
};

export default SalesReports;

这是我正在使用的子组件

const Dashboard: FC = () => {
  const repostsRxjs = rxjsConfig(reportingAxios);
  const dispatch = useDispatch();

  useEffect(() => {
    repostsRxjs
      .post<SalesDashboardItem[]>(
        '/sales-data/order-details/6087bc3606ff073930a10848?timezone=Asia/Dubai&from=2022-09-03T00:00:00.00Z&to=2022-12-25T00:00:00.00Z&size=10',
        {
          brandIds: [],
          channelIds: [],
          kitchenIds: [],
          countryIds: [],
        },
      )
      .pipe(
        take(1),
        catchError((err: any) => of(console.log(err))),
      )
      .subscribe((response: SalesDashboardItem[] | void) => {
        if (response) {
          dispatch(reportsActionCreators.changeSalesDashboardData(response));
        }
      });
  }, []);

  const { isActiveFilter } = useSelector<RootState, any>((state: RootState) => {
    return {
      isActiveFilter: state.filterData.isActiveFilter,
    };
  });

  return (
    <>
      <div
        onClick={() => {
          dispatch(filterssActionCreators.handleFilterPanel(!isActiveFilter));
          dispatch(
            filterssActionCreators.changeSelectedFiltersType([
              FilterTypes.BRAND,
              FilterTypes.CHANNEL,
              FilterTypes.COUNTRY,
              FilterTypes.KITCHEN,
            ]),
          );
        }}
      >
        Dashboard
      </div>
      {isActiveFilter && <FilterPanel />}
    </>
  );
};

export default Dashboard;

动作

  import { SalesDashboardItem } from 'app/models/Reports';
import { actionCreator } from 'app/state/common';

export type ChangeSalesTabPayload = string;
export type ChangeSalesDashboardDataPayload = SalesDashboardItem[];

export const reportsActionTypes = {
  CHANGE_SALES_TAB: 'CHANGE_SALES_TAB',
  CHANGE_SALES_DASHABOARD_DATA: 'CHANGE_SALES_DASHABOARD_DATA',
};

export const reportsActionCreators = {
  changeSalesTab: actionCreator<ChangeSalesTabPayload>(reportsActionTypes.CHANGE_SALES_TAB),
  changeSalesDashboardData: actionCreator<ChangeSalesDashboardDataPayload>(
    reportsActionTypes.CHANGE_SALES_DASHABOARD_DATA,
  ),
};

export type ReportsAction = {
  type: typeof reportsActionTypes.CHANGE_SALES_TAB | typeof reportsActionTypes.CHANGE_SALES_DASHABOARD_DATA;
  payload: ChangeSalesTabPayload | ChangeSalesDashboardDataPayload;
};

减速器

    import { SalesDashboardItem } from 'app/models/Reports';
import { salesReportsTabs } from 'app/utils/reports';
import { reportsActionTypes, ReportsAction } from './actions';

export type ReportsState = {
  selectedSalesTab: string;
  salesDashboardFilterData: {
    brands: string[];
    kitchens: string[];
    channels: string[];
    countries: string[];
  };
  salesDashBoardDatta: SalesDashboardItem[];
};

const initialState: ReportsState = {
  selectedSalesTab: salesReportsTabs[0].id,
  salesDashboardFilterData: {
    brands: [],
    kitchens: [],
    channels: [],
    countries: [],
  },
  salesDashBoardDatta: [],
};

export default (state = initialState, action: ReportsAction): ReportsState => {
  switch (action.type) {
    case reportsActionTypes.CHANGE_SALES_TAB:
      return { ...state, selectedSalesTab: action.payload as string };
    case reportsActionTypes.CHANGE_SALES_DASHABOARD_DATA:
      return { ...state, salesDashBoardDatta: action.payload as SalesDashboardItem[] };
    default:
      return state;
  }
};

减根器

import { combineReducers } from 'redux';
import SidePanelReducer from './reducers/sidepanel.reducer';
import authReducer from './auth';
import onboardingReducer from './onboarding';
import applicationReducer from './application';
import inventoryConfigReducer from './inventoryConfig/inventory.reducer';
import reportsReducer from './reports';
import filtersReducer from './filter';

const rootReducer = combineReducers({
  sidePanel: SidePanelReducer,
  auth: authReducer,
  onboarding: onboardingReducer,
  application: applicationReducer,
  inventory: inventoryConfigReducer,
  reports: reportsReducer,
  filterData: filtersReducer,
});

export default rootReducer;

当我在 useEffect(componentDidMount) 中添加调度操作时，就会发生这种循环。 否则，这段代码工作正常。 如何避免该组件重新渲染？

Answer 1

我认为问题在于useSelector挂钩每次都会返回一个新的 object 引用，这会触发useMemo挂钩以重新记忆Dashboard组件的“实例”。 然后， Dashboard的新“实例”安装并运行其useEffect挂钩，该挂钩调度更新state.reports存储中的 state.reports state 的操作。

无需创建并返回新的 object 引用以从中解构selectedSalesTab ，只需直接返回state.reports object。

改变

const { selectedSalesTab } = useSelector<RootState, any>((state: RootState) => {
  return {
    selectedSalesTab: state.reports.selectedSalesTab,
  };
});

到

const { selectedSalesTab } = useSelector<RootState, any>((state: RootState) => {
  return state.reports;
});