当我的主页加载时,我试图获取帖子,但当我运行应用程序时,Redux存储中的初始状态显示为空,这不应该是这种情况,但当我通过进行一些其他更改(而不是Redux数据存储的代码中的任何更改)运行相同的代码时,它显示存储有帖子。
以下是所有包含的文件的屏幕截图。
postReducer.js
import { ActionTypes } from "../constants/action-types";
const initialState = {
posts: [],
};
const postReducer = (state = initialState, { type, payload }) => {
switch (type) {
case ActionTypes.SET_POSTS:
return { ...state, posts: payload };
default:
return state;
}
};
export default postReducer;
store.js
import { legacy_createStore as createStore } from "redux";
import reducers from "./reducers/index";
const store = createStore(
reducers,
{},
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
export default store;
home.js
const dispatch = useDispatch();
const fetchPosts = async () => {
const response = await axios
.get("https://fakestoreapi.com/products")
.catch((err) => {
console.log("error : ", err);
});
dispatch(setPosts(response.data));
};
useEffect(() => {
fetchPosts();
}, []);
postAction.js
import { ActionTypes } from "../constants/action-types";
const postReducer = (state = [], { type, payload }) => {
switch (type) {
case ActionTypes.SET_POSTS:
console.log("Here");
return { ...state, posts: payload };
default:
return state;
}
};
export default postReducer;
Post.js
import {
Avatar,
Card,
CardActions,
CardContent,
CardHeader,
CardMedia,
Checkbox,
IconButton,
Typography,
} from "@mui/material";
// import { ExpandMore } from "@mui/icons-material";
import ShareIcon from "@mui/icons-material/Share";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import Favorite from "@mui/icons-material/Favorite";
import { FavoriteBorder } from "@mui/icons-material";
import { useSelector } from "react-redux";
const Post = () => {
const posts = useSelector((state) => state.allPosts.posts);
console.log(posts);
const renderList = posts.map((post, key) => {
return (
<Card sx={{ marginBottom: "10px" }} key={key}>
<CardHeader
avatar={
<Avatar sx={{ bgcolor: "red" }} aria-label="recipe">
R
</Avatar>
}
action={
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
title="John"
subheader={post.updatedAt}
/>
<CardMedia
component="img"
height="20%"
image={post.image}
alt="Paella dish"
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
{post.description}
</Typography>
</CardContent>
<CardActions disableSpacing>
<IconButton aria-label="add to favorites">
<Checkbox
icon={<FavoriteBorder />}
checkedIcon={<Favorite sx={{ color: "red" }} />}
/>
</IconButton>
<IconButton aria-label="share">
<ShareIcon />
</IconButton>
{/* <ExpandMore
expand={expanded}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore> */}
</CardActions>
</Card>
);
});
return <>{renderList}</>;
};
export default Post;
postAction.js
import { ActionTypes } from "../constants/action-types";
export const setPosts = (posts) => {
return {
type: ActionTypes.SET_POSTS,
payload: posts,
};
};
export const selectedPost = (post) => {
return {
type: ActionTypes.SELECTED_POST,
payload: post,
};
};
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "../src/redux/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
1条答案
按热度按时间gxwragnw1#
我只是必须检查,如果我的职位是空的,然后Map它,那么它的工作很好。