Удаление поста по id

Question

reducer

import { COMBINE_POST } from '../Actions/actionType'

const initialState = {
    posts: null,
    users: null,
    comments: null,
    post: null
}

export const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'getPosts':
            return {
                ...state,
                posts: action.data
            }
        case 'getUsers':
            return {
                ...state,
                users: action.data
            }
        case 'getComments':
            return {
                ...state,
                comments: action.data
            }
        case COMBINE_POST :
            return {
                ...state,
                post: action.payload
            }
        case 'removePost':
                console.log('removepost', state.post.post)
            return {
                ...state,
                post: state.post.post.filter(item => item.id !== 
                 action.payload)
            }
        default:
            return state
    }
}

action

import { COMBINE_POST } from './actionType'

export const fetchPosts = () => {
   return dispatch => {
       fetch(`https://jsonplaceholder.typicode.com/posts/`)
           .then(res => res.json())
           .then(res => dispatch({ type: 'getPosts', data: res }))
   }
}

export const fetchUsers = () => {
   return dispatch => {
       fetch(`https://jsonplaceholder.typicode.com/users/`)
           .then(res => res.json())
           .then(res => dispatch({ type: 'getUsers', data: res }))
   }
}

export const fetchComments = () => {
   return dispatch => {
       fetch(`https://jsonplaceholder.typicode.com/comments/`)
       .then(res => res.json())
       .then(res => dispatch({ type: 'getComments', data: res }))
   }
}

export const removePost = id => {
   return dispatch => {
       fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
           method: 'DELETE', 
   })
   dispatch({ type: 'removePost', payload: id })
   }
}

export const combimePost = arr => ({ type: COMBINE_POST, payload: arr })

component render

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { fetchPosts, fetchUsers, fetchComments, removePost } from '../../Redux/Actions/action'
import { combimePost } from '../../Redux/Actions/action'
import  './newsList.scss'

export const NewsList = () => {

 const dispatch = useDispatch()
 const selector = useSelector(state => state.rootReducer)


 useEffect(() => {
   dispatch(
     fetchPosts()
   )
 }, [])

 useEffect(() => {
   dispatch(
     fetchUsers()
   )
 }, [])

 useEffect(() => {
   dispatch(
     fetchComments()
   )
 }, [])


This is where I combine the post and user id

 useEffect(() => {
   const combinePost = selector.posts?.map(post => ({
      ...post, 
      user: selector.users?.find(user => post.userId === user.id), 
      commetn: selector?.comments?.find(comment => post.id === comment.postId)
     }))
   return dispatch(
     combimePost(
       {
         post: combinePost,
       }
     )
   )
 }, [selector.posts, selector.users, selector.comments])



 return <>
   {selector?.post?.post?.map((res, i) => (
         <div className="card text-center" key={i}>
         <div className="card-header">
         {res.user?.name}
         </div>
         <div className="card-body">
           <h5 className="card-title">{res.title}</h5>
           <p className="card-text">{res.comment?.body}</p>
             <button 
           className="btn btn-outline-danger"
         onClick={() => dispatch(removePost(res.id))}
          >DELETE</button>
         </div>
         <div className="card-footer text-muted">
           
         </div>
       </div>
   )
   )}
 </>
}

При удалении поста , пропадают со страницы все посты, в консоле показывает что выбранный пост удален, но на странице не рендерится , она становиться пустая. в чем проблема ?

БЛОГ НА HUSL

Удаление поста по id

Ответы (0 шт):