使用useSelector()获取Redux状态时返回Promise而非更新后的值

核心问题分析 #

你遇到的问题源于两个关键错误：

1. Redux的reducer必须是同步纯函数，不能在reducer内部编写异步请求逻辑
2. useEffect的回调函数使用错误，直接执行了dispatch而非传递函数

步骤1：修正Slice的异步逻辑处理 #

使用Redux Toolkit提供的createAsyncThunk处理异步请求，在extraReducers中响应异步操作的不同阶段更新状态：

// store/sliceOne.js
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

// 定义异步请求的thunk函数
export const fetchProduct = createAsyncThunk(
  'sliceOne/fetchProduct',
  async () => {
    const res = await fetch(`https://fakestoreapi.com/products/2`);
    const data = await res.json();
    return data;
  }
);

const sliceOne = createSlice({
  name: "sliceOne",
  initialState: {
    firstName: "first",
    lastName: "last",
    age: 10,
    product: {},
    loading: false,
    error: null
  },
  reducers: {
    // 存放同步状态更新逻辑
  },
  extraReducers: (builder) => {
    builder
      // 请求中状态
      .addCase(fetchProduct.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      // 请求成功状态
      .addCase(fetchProduct.fulfilled, (state, action) => {
        state.loading = false;
        state.product = action.payload;
      })
      // 请求失败状态
      .addCase(fetchProduct.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || '请求失败';
      });
  }
});

export const sliceOneActions = sliceOne.actions;
export default sliceOne;

步骤2：修正组件中的useEffect调用 #

将直接执行的dispatch改为在useEffect的回调函数内部执行，同时优化useSelector的取值范围：

// component/Compo.js
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchProduct } from "../store/slice-one";

const Compo = () => {
  const dispatch = useDispatch();
  // 只获取需要的slice状态，避免不必要的重渲染
  const { product, loading, error } = useSelector((state) => state.sliceOne);

  // 正确的useEffect用法：传递回调函数
  useEffect(() => {
    dispatch(fetchProduct());
  }, [dispatch]);

  console.log("当前状态:", { product, loading, error });

  return (
    <div>
      {loading && <p>加载中...</p>}
      {error && <p>错误: {error}</p>}
      {product.id && (
        <div>
          <h3>{product.title}</h3>
          <p>价格: ${product.price}</p>
        </div>
      )}
    </div>
  );
};

export default Compo;

关键说明 #

• 异步逻辑剥离：所有异步操作必须放在thunk函数中，reducer只负责同步更新状态，这是Redux的核心规则，保证状态变化可预测
• useEffect规范：useEffect的第一个参数必须是函数，直接执行dispatch会导致组件挂载时立即触发请求，且传递Promise作为回调会引发异常
• 精准取值：useSelector尽量只获取组件需要的状态片段，避免因全局state无关变化导致组件重渲染

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