如何在 React Redux 中正确实现删除功能

Question

我正在尝试删除一个 post 用户。当我点击 post 下面的 delete 按钮时，它应该会被实时删除，就像我不必刷新页面就可以删除它一样。

我已经准备好后端控制器，但在 redux 部分有一些困惑，比如我如何构建我的操作。

deletePost: async (req, res) => {
    try {
      const post = await Post.findByIdAndDelete(req.params.id)
      if (!post) {
        return res.status(200).json({ error: "No post found"})
      }
      return res.status(200).json({ post })
    } catch(error) {
        return res.json({ error })
    }
  }

export const deletePost = (id) => {
  return async dispatch => {
    dispatch({ type: "DELETING_POST_START" })
    try {
      return await axios.delete(`http://localhost:3000/api/v1/posts/${id}/delete`)
    }
    dispatch({ type: "DELETING_POST_SUCCESS" })


    .........how should i structure this action creator_

post减速机

const initialState = {
    isAddingPost: false,
    postError: null,
    post: {},
    isFetchingPosts: null,
    hasFetchedPosts: null,
    fetchingPostsError: null,
    postList: []
  }

  const post = (state = initialState, action) => {
    switch (action.type) {
      case "ADD_POST_STARTS":
        return { ...state, isAddingpost: true, postError: null }
      case "ADD_POST_SUCCESS":
        return {
          ...state,
          isAddingpost: false,
          postError: null,
          post: action.data
        }
      case "ADD_POST_ERROR":
        return {
          ...state,
          isAddingpost: false,
          postError: action.data.error,
          post: {}
        }
      case "FETCHING_POSTS_START":
        return {
          ...state,
          isFetchingPosts: true,
          hasFetchedPosts: false,
          fetchingPostsError: null
        }
      case "FETCHING_POSTS_SUCCESS":
        return {
          ...state,
          isFetchingPosts: false,
          hasFetchedPosts: true,
          fetchingPostsError: null,
          postList: action.data.posts
        }
      case "FETCHING_POSTS_ERROR":
        return {
          ...state,
          isFetchingPosts: false,
          hasFetchedPosts: false,
          fetchingPostsError: action.data.error
        }
      default:
        return state
    }
  }

  export default post

另外，我还有一个reducer：

const initialState = {
    isFetchingUserPosts: null,
    isFetchedUserPosts: null,
    userPosts: [],
    fetchingUserPostsError: null
  }

  const userPosts = (state = initialState, action) => {
    switch (action.type) {
      case "FETCHING_USER_POSTS_START":
        return {
          ...state,
          isFetchingUserPosts: true,
          fetchingUserPostsError: null
        }
      case "FETCHING_USER_POSTS_SUCCESS":
        return {
          ...state,
          isFetchingUserPosts: false,
          isFetchedUserPosts: true,
          userPosts: action.data,
          fetchingUserPostsError: null
        }
      case "FETCHING_USER_POSTS_ERROR":
        return {
          ...state,
          isFetchingUserPosts: false,
          isFetchedUserPosts: false,
          userPostsError: action.data.error
        }
      default:
        return state
    }
  }

  export default userPosts

Answer 1

好的，您没有提供太多关于数据结构的信息，所以我只是做一些假设。
所以你的减速器应该看起来像这样。

/reducers/post.js

const initialState = {
  loading: false,
  error: null,
  //Above two are optional.
  data: [] // These should be your posts.
};

export default (state = initialState, action) => {
  switch(action.type) {
    case 'DELETING_POST_START': return {...state, loading: true };
    case 'DELETING_POST_SUCCESS': 
      const posts = state.data.filter(post => post.id !== action.payload.id);
      return {...state, loading: false, error: null ,data: posts}      
    case 'DELETING_POST_FAILURE': return {...state, loading: false, error: action.payload };
    }
  }

然后像这样调用动作：-

export const deletePost = (id) => {
  return async dispatch => {
    dispatch({ type: "DELETING_POST_START" })
    try {
      const deletedPost = await axios.delete(`http://localhost:3000/api/v1/posts/${id}/delete`);
      dispatch({ type: "DELETING_POST_SUCCESS", payload: deletedPost });
    }catch(err){//Do something with error}
    ... Rest of the code here
}

我没有添加故障检查。
你还提到你想要实时更新，上面的例子不是 "real-time" 因为它等待服务器响应。
您可能想研究乐观更新以及如何在 redux 中实现它们。

如何在 React Redux 中正确实现删除功能

How to correctly implement the delete functionality in React Redux

reactjs

redux

redux-thunk