redux userSlice和videoSlice使用相同的值进行更新

u0njafvf  于 2023-04-21  发布在  其他
关注(0)|答案(1)|浏览(85)

我正在尝试通过以下youtube教程为一个项目后端.我有这个错误与Redux,我无法弄清楚小时. currentVideo在视频.jsx是未定义的,因为用户和视频切片正在更新相同的currentUser值.我想知道这里是什么错误,以及我如何得到videoRes.data到currentVideo.我想创建一个用户商店和视频商店分开。
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); // here I'm getting the value 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 screenshotConsole screenshot

gpfsuwkq

gpfsuwkq1#

我想明白了。我在store.js中遇到了导入问题。

相关问题