Redux Toolkit异步Thunk在useEffect中引发React应用故障求助

核心问题定位 #

1. Recipe Slice语法错误：extraReducers被错误嵌套在reducers对象内部，导致Redux无法识别getRecipes.fulfilled的状态更新逻辑——这是数据无法同步到recipes状态的直接原因。
2. useEffect依赖缺失：调用getRecipes的副作用未监听uid变化，初始渲染时uid可能未就绪就发起无效请求，后续uid更新后也不会重新触发数据获取。

具体修复步骤 #

1. 修正Recipe Slice的extraReducers位置 #

将extraReducers与reducers同级放置在createSlice参数中，修正后的代码：

export const recipeSlice = createSlice({
  name: 'recipesSlice',
  initialState: {
    recipes: []
  },
  reducers: {
    ADD_RECIPE: (state, action) => {
      state.recipes.push(action.payload)
    },
    DELETE_RECIPE: (state, action) => {
      state.recipes = state.recipes.filter((recipe) => recipe.recipeId !== action.payload.recipeId)
    }
  },
  extraReducers: builder => {
    builder.addCase(getRecipes.fulfilled, (state, action) => {
      state.recipes = action.payload
    })
  }
})

export const { ADD_RECIPE, DELETE_RECIPE } = recipeSlice.actions;
export default recipeSlice.reducer

2. 修复useEffect的依赖与触发逻辑 #

在RecipeApp组件中，更新useEffect的依赖数组并添加uid有效性判断，避免无效请求：

useEffect(() => {
  if (!uid) return; // 确保uid存在再发起请求
  dispatch(getRecipes(uid))
}, [dispatch, uid]) // 添加uid到依赖数组，确保uid变化时重新获取数据

3. 验证UID的取值路径 #

确认从Redux中获取的uid路径正确：

// 检查用户认证slice的存储结构，若uid直接存在于state.users.uid，则修改为：
const uid = useSelector(state => state.users.uid)
// 而非原代码的state.users.uid.user

4. 处理页面刷新时的加载状态 #

为避免刷新时因数据未就绪导致崩溃，在渲染RecipeList前添加加载判断：

return (
  <div className="recipeapp">
    <h1 className='recipeapp__heading'>Recipes</h1><button onClick={logout}>Log out</button>
    <div className="recipeapp__container">
      <ErrorBoundary FallbackComponent={ErrorFallBack}>
        {loading || !uid ? (
          <div>加载中...</div>
        ) : (
          <RecipeList recipes={recipes} />
        )}
      </ErrorBoundary>
      <AddRecipe addRecipe={addRecipe} />
    </div>
  </div>
);

额外验证点 #

• 查看Redux Logger输出，确认getRecipes.fulfilled动作触发后，状态更新日志是否正常出现。
• 检查Firebase权限规则，确保已认证用户可以读取users/${uid}/recipes路径下的数据。

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