Redux Store数据卸载前如何判断是否被其他挂载组件使用？

这个场景其实在多组件共享缓存数据时非常常见，你最初想到的计数思路方向是对的，但手动在每个组件里维护确实会显得繁琐。下面给你几个更优雅的实现方案，既能解决问题又能简化代码：

方案1：用自定义Hook封装订阅/取消逻辑（React Hooks推荐） #

把数据加载、计数维护、卸载清理的逻辑全部封装到一个自定义Hook里，组件只需要调用Hook获取数据，不用关心底层的计数和Redux操作。

Hook实现 #

// hooks/useItemsData.js
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { LOAD_ITEMS, INCREMENT_COMPONENT_COUNT, DECREMENT_COMPONENT_COUNT } from '../actions';

export const useItemsData = () => {
  const dispatch = useDispatch();
  const { items, activeComponents = 0 } = useSelector(state => state.data);

  useEffect(() => {
    // 组件挂载时：无数据则触发加载，同时增加活跃组件计数
    if (!items) {
      dispatch(LOAD_ITEMS);
    }
    dispatch(INCREMENT_COMPONENT_COUNT);

    // 组件卸载时：减少计数，由Reducer判断是否删除数据
    return () => {
      dispatch(DECREMENT_COMPONENT_COUNT);
    };
  }, [dispatch, items]);

  return items;
};

Reducer处理逻辑 #

把计数判断和数据删除的逻辑放在Reducer里统一处理，避免组件里分散逻辑：

// reducers/dataReducer.js
const initialState = {
  items: null,
  activeComponents: 0
};

export default function dataReducer(state = initialState, action) {
  switch (action.type) {
    case 'LOAD_ITEMS_SUCCESS': // 假设你的epic返回的成功动作
      return { ...state, items: action.payload };
    case 'INCREMENT_COMPONENT_COUNT':
      return { ...state, activeComponents: state.activeComponents + 1 };
    case 'DECREMENT_COMPONENT_COUNT':
      const newCount = state.activeComponents - 1;
      // 只有当最后一个使用组件卸载时，才清除数据
      if (newCount === 0) {
        return { ...state, activeComponents: 0, items: null };
      }
      return { ...state, activeComponents: newCount };
    default:
      return state;
  }
}

组件使用 #

import { useItemsData } from './hooks/useItemsData';

function MyComponent() {
  const items = useItemsData();

  if (!items) return <div>Loading...</div>;
  
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

方案2：使用Redux Toolkit Query（官方推荐，零手动计数） #

如果你的项目可以迁移到Redux Toolkit，RTK Query是官方专门解决数据获取和缓存的工具，它内置了自动缓存管理、数据生命周期维护的功能，完全不用自己写计数逻辑。

定义API Slice #

// services/apiSlice.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/your-api-base-url' }),
  endpoints: (builder) => ({
    getItems: builder.query({
      query: () => 'items', // 你的API路径
      // 可选：设置未使用数据的缓存时长，默认60秒，到期自动清除
      keepUnusedDataFor: 30,
    }),
  }),
});

// 自动生成的Hook，组件直接使用
export const { useGetItemsQuery } = apiSlice;

组件使用 #

import { useGetItemsQuery } from './services/apiSlice';

function MyComponent() {
  // 自动处理加载、缓存、刷新逻辑
  const { data: items, isLoading } = useGetItemsQuery();

  if (isLoading) return <div>Loading...</div>;
  
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

RTK Query会自动跟踪哪些组件在使用这个数据，当所有组件都卸载后，超过keepUnusedDataFor设置的时间就会自动清除缓存数据，完全不用手动维护计数，是最省心的方案。

方案3：高阶组件（HOC）封装（适配类组件） #

如果你的项目还在使用类组件，可以用HOC把计数和生命周期逻辑封装起来，避免每个组件重复写相同的代码。

HOC实现 #

// hoc/withItemsData.js
import React from 'react';
import { connect } from 'react-redux';
import { LOAD_ITEMS, INCREMENT_COMPONENT_COUNT, DECREMENT_COMPONENT_COUNT } from '../actions';

const withItemsData = (WrappedComponent) => {
  class WithItemsData extends React.Component {
    componentDidMount() {
      const { items, dispatch } = this.props;
      if (!items) {
        dispatch(LOAD_ITEMS);
      }
      dispatch(INCREMENT_COMPONENT_COUNT);
    }

    componentWillUnmount() {
      this.props.dispatch(DECREMENT_COMPONENT_COUNT);
    }

    render() {
      const { items, ...restProps } = this.props;
      return <WrappedComponent items={items} {...restProps} />;
    }
  }

  const mapStateToProps = (state) => ({
    items: state.data.items,
  });

  return connect(mapStateToProps)(WithItemsData);
};

export default withItemsData;

组件使用 #

import withItemsData from './hoc/withItemsData';

class MyComponent extends React.Component {
  render() {
    const { items } = this.props;
    if (!items) return <div>Loading...</div>;
    
    return (
      <ul>
        {items.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    );
  }
}

export default withItemsData(MyComponent);

这个方案的Reducer逻辑和方案1完全一致，把重复的生命周期代码抽离到HOC中，组件只需要专注于渲染逻辑。

内容的提问来源于stack exchange，提问作者madhur