我正在尝试通过以下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;
1条答案
按热度按时间gpfsuwkq1#
我想明白了。我在store.js中遇到了导入问题。