React,Redux: Show all posts - reactjs

Question

I'm a begineer to React, redux and web development. I'm making a CRUD application using JSON placeholder as dummy backend , react and redux for showing posts.
I want to render out all the posts form JSON placeholder and simply display it
Post.js
import React, { useEffect, useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import { useNavigate } from "react-router-dom"
import { getPostAll } from "../redux/features/PostSlice"
return (
<>
<div className="row mt-4 d-flex align-items-center justify-content-center">
<h2 className="row mt-4 d-flex align-items-center justify-content-center">
Dashboard
</h2>
<div>
<h2 className="row mt-4 d-flex align-items-center justify-content-center">
All Posts
</h2>
{/* {console.log(getPostAll)} */}
{console.log(dispatch(getPostAll()))}
{dispatch(getPostAll).forEach((element) => {
console.log(element)
})}
</div>
</>
)
}
export default Posts
PostSlice.js
import { createAsyncThunk, createSlice } from "#reduxjs/toolkit"
export const getPost = createAsyncThunk("post/getPost", async ({ id }) => {
return fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then((res) =>
res.json()
)
})
export const getPostAll = createAsyncThunk("posts/getPosts", async () => {
return fetch(`https://jsonplaceholder.typicode.com/posts`)
.then((res) => res.json())
.then((json) => console.log(json, typeof json, json[0].id))
})
// export const getPostAll = fetch("https://jsonplaceholder.typicode.com/posts")
// .then((response) => response.json())
// .then((json) => console.log(json))
export const deletePost = createAsyncThunk(
"post/deletePost",
async ({ id }) => {
return fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: "DELETE",
}).then((res) => res.json())
}
)
export const createPost = createAsyncThunk(
"post/createPost",
async ({ values }) => {
return fetch(`https://jsonplaceholder.typicode.com/posts`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-type": "application/json",
},
body: JSON.stringify({
title: values.title,
body: values.body,
}),
}).then((res) => res.json())
}
)
export const updatePost = createAsyncThunk(
"post/updatePost",
async ({ id, title, body }) => {
return fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: "PUT",
headers: {
Accept: "application/json",
"Content-type": "application/json",
},
body: JSON.stringify({
title,
body,
}),
}).then((res) => res.json())
}
)
const PostSlice = createSlice({
name: "post",
initialState: {
post: [],
loading: false,
error: null,
body: "",
edit: false,
},
reducers: {
setEdit: (state, action) => {
state.edit = action.payload.edit
state.body = action.payload.body
},
},
extraReducers: {
[getPost.pending]: (state, action) => {
state.loading = true
},
[getPost.fulfilled]: (state, action) => {
state.loading = false
state.post = [action.payload]
},
[getPost.rejected]: (state, action) => {
state.loading = false
state.error = action.payload
},
[deletePost.pending]: (state, action) => {
state.loading = true
},
[deletePost.fulfilled]: (state, action) => {
state.loading = false
state.post = [action.payload]
},
[deletePost.rejected]: (state, action) => {
state.loading = false
state.error = action.payload
},
[createPost.pending]: (state, action) => {
state.loading = true
},
[createPost.fulfilled]: (state, action) => {
state.loading = false
state.post = [action.payload]
},
[createPost.rejected]: (state, action) => {
state.loading = false
state.error = action.payload
},
[updatePost.pending]: (state, action) => {
state.loading = true
},
[updatePost.fulfilled]: (state, action) => {
state.loading = false
state.post = [action.payload]
},
[updatePost.rejected]: (state, action) => {
state.loading = false
state.error = action.payload
},
},
})
export const { setEdit } = PostSlice.actions
export default PostSlice.reducer
I want to display all the posts from the dummy database
I have tried looping using map functinality and forEach but not desired results.

Answer 1

You want to keep the task of requesting the posts separate from the task of accessing the posts.
To request the posts, you want to dispatch your getPostAll action. You only need to do this once, so put it inside a useEffect.
const dispatch = useDispatch();
useEffect(() => {
dispatch(getPostAll());
}, []);
You don't need to return anything here. Remember, we are separating those tasks.
It looks like you're not actually responding to the getPostAll thunk in your reducer? That's a problem which you need to fix for this approach to work.
Use one or more useSelector hooks to access the current value of the redux state. These values will update automatically as your reducer responds to the changes which were initiated by the getPostAll. On your first render you will have no data, then you'll have no data but loading: true. Finally you will have either posts or an error. Your component needs to render the correct content for all of these cases.
const Posts = () => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(getPostAll());
}, []);
const { post, loading, error } = useSelector(state => state.posts);
// I find it easier to extract this part and `return` instead of using a bunch of `&&`
const renderContent = () => {
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error</div>;
}
if (post) {
return (
<div>
{post.map(item =>
<Post key={item.id} data={item}/>
)}
</div>
);
}
return null;
}
return (
<>
<div className="row mt-4 d-flex align-items-center justify-content-center">
<h2 className="row mt-4 d-flex align-items-center justify-content-center">
Dashboard
</h2>
<div>
<h2 className="row mt-4 d-flex align-items-center justify-content-center">
All Posts
</h2>
{renderContent()}
</div>
</>
)
}