我正在尝试通过遵循一个项目的youtube教程后端。我有这个错误与Redux,我无法弄清楚几个小时。视频中的当前视频。jsx是未定义的,因为用户和视频切片正在使用相同的currentUser值更新。我想知道这里的错误是什么,我如何得到视频。数据转换成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截图控制台屏幕截图
我明白了。我在store.js中有导入问题。