Redux集成Firebase Firestore 用Redux Toolkit实现跨组件状态共享

不需要先用React useState做中间状态承接，直接基于Redux Toolkit（RTK）实现全流程状态管理即可。

• useState是组件级状态方案，你本身的需求是跨多组件共享分类数据，多加一层useState中转只会增加无意义的状态同步逻辑，提升状态不一致的风险，没有实际收益。
• RTK原生支持异步逻辑处理，完全可以覆盖从Firestore拉取数据、存全局状态、组件读取消费的全流程，不需要额外的状态层过渡。

你当前提供的Firestore请求函数缺少返回值，无法拿到生成的categoryMap，先补全return逻辑：

export const getCategoriesAndDocuments = async () => {
  const collectionRef = collection(db, 'categories');
  const q = query(collectionRef);
  const querySnapshot = await getDocs(q);
  const categoryMap = querySnapshot.docs.reduce((acc, docSnapshot) => {
    const { title, items } = docSnapshot.data();
    acc[title.toLowerCase()] = items;
    return acc;
  }, {});
  // 补全返回值
  return categoryMap;
};

1. 创建分类模块的slice，用createAsyncThunk封装异步数据拉取逻辑

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { getCategoriesAndDocuments } from '你的firebase工具函数路径';

// 定义异步拉取action
export const fetchCategories = createAsyncThunk(
  'categories/fetchList',
  async () => {
    return await getCategoriesAndDocuments();
  }
);

const categoriesSlice = createSlice({
  name: 'categories',
  initialState: {
    categoryMap: {},
    isLoading: false,
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchCategories.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(fetchCategories.fulfilled, (state, action) => {
        state.isLoading = false;
        state.categoryMap = action.payload;
      })
      .addCase(fetchCategories.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.error.message;
      })
  }
});

// 导出选择器方便组件读取状态
export const selectCategoryMap = (state) => state.categories.categoryMap;
export const selectCategoriesLoading = (state) => state.categories.isLoading;
export default categoriesSlice.reducer;

2. 将上述reducer注册到RTK的store配置中，之后在需要触发数据拉取的位置（比如路由级顶层组件）调用dispatch(fetchCategories())，所有需要用到分类数据的组件直接通过useSelector(selectCategoryMap)读取全局状态即可。

只有当数据明确仅在单个组件内部使用、没有跨组件共享规划时，才优先用useState管理。你当前已经明确需要多组件共享状态，直接对接RTK是冗余最少、维护成本最低的方案。

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