Как правильно реализовать функцию удаления в React Redux - PullRequest
Новая
       2

Как правильно реализовать функцию удаления в React Redux

0 голосов
/ 29 марта 2020

Я пытаюсь удалить сообщение пользователя. Когда я нажимаю кнопку delete под сообщением, она должна быть удалена в режиме реального времени, как будто мне не нужно обновлять sh страницу для ее удаления.

У меня есть серверная часть контроллер готов, но есть некоторая путаница в части редукса, например, как мне структурировать свое действие. 

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_

постредуктор 

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

Также У меня есть другой редуктор: 

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

1 Ответ

0 голосов
/ 29 марта 2020

Хорошо, вы не предоставили много информации о том, как структурированы ваши данные, поэтому я просто собираюсь сделать некоторые предположения.
Итак, ваш редуктор должен выглядеть примерно так.

/ redurs / 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
}

Я не добавил проверки ошибок.
Также вы упомянули, что хотите обновления в реальном времени, Приведенный выше пример не «в реальном времени», так как он ожидает ответа от сервера.
Возможно, вы захотите изучить оптимистические c обновления и способы их реализации в избыточной версии.

...