Next.js中Redux Dispatch仅全局作用域生效，函数内无法触发

1. 闭包捕获旧items值导致dispatch无效 #

组件渲染时，buyItem函数会捕获当前的items props值。当你点击按钮执行异步操作时，items可能已经是旧数据——此时dispatch的是旧内容，Redux store没有产生可感知的变化，看起来像是dispatch没生效。

解决方法：
不要直接复用组件props的items，而是在Supabase操作完成后，重新从数据库拉取最新的items数据再dispatch：

async function buyItem(title) {
  if (title === "arg") {
    let { error } = await supabase
      .from("itemCollection")
      .upsert(updateSturmhaube, { returning: "minimal" });

    // 重新获取最新数据
    const { data: latestItems, error: fetchError } = await supabase.from("itemCollection").select();
    if (fetchError) throw fetchError;

    dispatch(loginActions.fetchItems(latestItems)); // 使用最新数据dispatch

    if (error) throw error;
  }
}

2. Redux Reducer处理逻辑异常 #

检查fetchItems对应的reducer代码，确认是否正确处理了action的payload并更新state。如果reducer没有正确修改state，即使dispatch触发，store也不会变化：

错误示例：

case FETCH_ITEMS:
  return state; // 未更新state，相当于无操作

正确示例：

case FETCH_ITEMS:
  return { ...state, items: action.payload }; // 正确替换/合并数据

3. 确认异步流程是否完整执行 #

虽然你提到action函数已被调用，但可以通过日志确认Supabase操作是否成功走到dispatch步骤：

async function buyItem(title) {
  if (title === "arg") {
    console.log('开始执行upsert');
    let { error } = await supabase
      .from("itemCollection")
      .upsert(updateSturmhaube, { returning: "minimal" });
    console.log('upsert完成，错误信息:', error);

    dispatch(loginActions.fetchItems(items));
    console.log('dispatch执行完成');

    if (error) throw error;
  }
}

查看控制台日志，确认流程是否完整走到dispatch环节。

4. 检查组件是否正确订阅Redux状态 #

确保组件通过useSelector从Redux store中获取最新数据，而非仅依赖初始传入的props。如果组件没有订阅store变化，即使dispatch成功，组件也不会重新渲染，看起来像是dispatch无效：

import { useSelector } from 'react-redux';

export default function Skilling() {
  // 直接从store订阅最新数据
  const items = useSelector(state => state.login.items);
  const stats = useSelector(state => state.login.stats);
  const dispatch = useDispatch();

  // 剩余代码...
}

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