Redux中userSlice与videoSlice更新值重复问题排查及解决

我跟着YouTube教程开发后端项目，卡Redux问题好几个小时了。Video.jsx里的currentVideo一直输出undefined，排查发现userSlice和videoSlice被同一个currentUser值更新，现在要解决这个问题，把接口返回的videoRes.data正确存入currentVideo，确保用户仓库和视频仓库完全独立。

相关代码 #

Video.jsx（核心逻辑） #

export default function Video() {
    const { currentUser } = useSelector((state) => state.user);
    const { currentVideo } = useSelector((state) => state.video);
  
    const dispatch = useDispatch();

    const path = useLocation().pathname.split("/")[2];

    const [channel, setChannel] = useState({});

    useEffect(() => {
        const fetchData = async () => {
            dispatch(fetchStart());
        try {
            const videoRes = await axios.get(`/videos/find/${path}`);
            const channelRes = await axios.get(`/users/find/${videoRes.data.userId}`);
            setChannel(channelRes.data);
            dispatch(fetchSuccess(videoRes.data));
            

        } catch (err) { dispatch(fetchFailure())}
        };
        fetchData();
    }, [path, dispatch]);
  
  
    console.log(currentUser); 
    console.log(currentVideo); // 这里输出undefined
  return (<></>)
}

videoSlice.js #

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  currentVideo: {},
  loading: false,
  error: false,
};

export const videoSlice = createSlice({
  name: "video",
  initialState,
  reducers: {
    fetchStart: (state) => {
      state.loading = true;
    },
    fetchSuccess: (state, action) => {
      state.loading = false;
      state.currentVideo = action.payload;
    },
    fetchFailure: (state) => {
      state.loading = false;
      state.error = true;
    },
    
  },
});

export const { fetchStart, fetchSuccess, fetchFailure } = videoSlice.actions;
export default videoSlice.reducer;

userSlice.jsx #

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  currentUser: null,
  loading: false, 
  error: false
}

export const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    loginStart: (state) => {
        state.loading = true;
    }, 
    loginSuccess: (state, action) => {
        state.loading = false;
        state.currentUser = action.payload;
    }, 
    loginFailure: (state) => {
        state.loading = false;
        state.error = true;
    }, 
    logout: (state) => {
        state.currentUser = null;
        state.loading = false;
        state.error = false;
    },
  },
})

export const {loginStart, loginFailure, loginSuccess, logout} = userSlice.actions;
export default userSlice.reducer;

异常现象 #

• Redux Devtools显示：user和video仓库的状态被同一个currentUser值更新，视频仓库的currentVideo始终未被正确赋值
• 控制台输出：currentVideo为undefined

问题原因及修复方案 #

核心问题：Store配置错误 #

90%的概率是你在配置Redux Store时，错误地将userReducer和videoReducer配置到了同一个键，或者重复使用了同一个reducer，导致两个slice共享同一份状态。

修复步骤 #

1. 检查并修正Store配置文件（通常是store.js或app/store.js）
   正确的配置应该是将user和video分别绑定到各自的reducer：

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice'; // 路径根据你的项目调整
import videoReducer from './videoSlice'; // 路径根据你的项目调整

export const store = configureStore({
  reducer: {
    user: userReducer,   // 对应useSelector里的state.user
    video: videoReducer, // 对应useSelector里的state.video
  },
});

如果之前把video的reducer写成了user: videoReducer，或者两个都用了同一个reducer，就会导致状态串用。

2. 确认Action导入正确性
   检查Video.jsx里的action是否来自videoSlice，避免误导入其他slice的action：

// 确保是从videoSlice导入
import { fetchStart, fetchSuccess, fetchFailure } from './videoSlice';

3. 验证Redux Devtools日志
   重新运行项目后，触发fetchSuccess时，查看Devtools里的action，确认更新的是video仓库的currentVideo，而不是user仓库的状态。

验证结果 #

修复后，Video.jsx里的currentVideo应该能正确获取到接口返回的视频数据，控制台不再输出undefined，user和video仓库的状态也会独立更新。

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