Как обновить фид пользователя после обновления поста?

Question

У меня есть компонент UserFeed и EditForm. Как только я отредактирую форму, я должен быть перенаправлен на UserFeed, а обновленные данные должны быть показаны на UserFeed (название и описание поста).

Итак, поток похож на - UserFeed, который выводит список сообщений, когда при нажатии на кнопку редактирования перенаправляется на EditForm, поле обновляется, снова перенаправляется на UserFeed, но теперь UserFeed должен отображать сообщения с обновленными данными, а не старые ,

В этом я просто перенаправлен на / просто посмотреть, работает ли он. Но меня нужно перенаправить на ленту с обновленными данными.

EditForm

import React, { Component } from "react";
import { connect } from "react-redux";
import { getPost } from "../actions/userActions"

class EditForm extends Component {
    constructor() {
    super();
    this.state = {
      title: '',
      description: ''
    };


    handleChange = event => {
        const { name, value } = event.target;
        this.setState({
            [name]: value
        })
    };

  componentDidMount() {
    const id = this.props.match.params.id
    this.props.dispatch(getPost(id))
  }

  componentDidUpdate(prevProps) {
    if (prevProps.post !== this.props.post) {
      this.setState({
        title: this.props.post.post.title,
        description: this.props.post.post.description
      })
    }
  }

  handleSubmit = () => {
    const id = this.props.match.params.id
    const data = this.state
    this.props.dispatch(updatePost(id, data, () => {
      this.props.history.push("/")
    }))
  }



  render() {
    const { title, description } = this.state
    return (
      <div>
        <input
          onChange={this.handleChange}
          name="title"
          value={title}
          className="input"
          placeholder="Title"
        />

        <textarea
          onChange={this.handleChange}
          name="description"
          value={description}
          className="textarea"
        ></textarea>

        <button>Submit</button>
      </div>
    );
  }
}

const mapStateToProps = store => {
  return store;
};

export default connect(mapStateToProps)(EditForm)

UserFeed

import React, { Component } from "react"
import { getUserPosts, getCurrentUser } from "../actions/userActions"
import { connect } from "react-redux"
import Cards from "./Cards"

class UserFeed extends Component {
  componentDidMount() {
    const authToken = localStorage.getItem("authToken")
    if (authToken) {
      this.props.dispatch(getCurrentUser(authToken))
      if (this.props && this.props.userId) {
        this.props.dispatch(getUserPosts(this.props.userId))
      } else {
        return null
      }
    }
  }

  render() {
    const { isFetchingUserPosts, userPosts } = this.props
    return isFetchingUserPosts ? (
      <p>Fetching....</p>
    ) : (
      <div>
        {userPosts &&
          userPosts.map(post => {
            return <Cards key={post._id} post={post} />
          })}
      </div>
    )
  }
}

const mapStateToPros = state => {
  return {
    isFetchingUserPosts: state.userPosts.isFetchingUserPosts,
    userPosts: state.userPosts.userPosts.userPosts,
    userId: state.auth.user._id
  }
}

export default connect(mapStateToPros)(UserFeed)

Cards

import React, { Component } from "react"
import { connect } from "react-redux"
import { compose } from "redux"
import { withRouter } from "react-router-dom"

class Cards extends Component {

  handleEdit = _id => {
    this.props.history.push(`/post/edit/${_id}`)
  }

  render() {
    const { _id, title, description } = this.props.post
    return (
      <div className="card">
        <div className="card-content">
          <div className="media">
            <div className="media-left">
              <figure className="image is-48x48">
                <img
                  src="https://bulma.io/images/placeholders/96x96.png"
                  alt="Placeholder image"
                />
              </figure>
            </div>
            <div className="media-content" style={{ border: "1px grey" }}>
              <p className="title is-5">{title}</p>
              <p className="content">{description}</p>
              <button
                onClick={() => {
                  this.handleEdit(_id)
                }}
                className="button is-success"
              >
                Edit
              </button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    nothing: "nothing"
  }
}

export default compose(withRouter, connect(mapStateToProps))(Cards)

updatePost действие

export const updatePost = (id, data, redirect) => {
    return async dispatch => {
      dispatch( { type: "UPDATING_POST_START" })
      try {
      const res = await axios.put(`http://localhost:3000/api/v1/posts/${id}/edit`, data)
      dispatch({
        type: "UPDATING_POST_SUCCESS",
        data: res.data
      })
      redirect()
    } catch(error) {
      dispatch({
        type: "UPDATING_POST_FAILURE",
        data: { error: "Something went wrong"}
      })
    } 
  }
  }

Я не уверен, что мой Действие правильное или нет.

Вот updatePost контроллер .

updatePost: async (req, res, next) => {
    try {
      const data = {
        title: req.body.title,
        description: req.body.description
      }
      const post = await Post.findByIdAndUpdate(req.params.id, data, { new: true })
      if (!post) {
        return res.status(404).json({ message: "No post found "})
      }
      return res.status(200).json({ post })
    } catch(error) {
      return next(error)
    }
}

Answer 1

Одна ошибка в том, что для установки текущих полей вам нужно использовать $ set в mongodb, также вы хотите построить объект, например, если у req.body нет title, он сгенерирует ошибка

updatePost: async (req, res, next) => {
    try {
      const data = {};
        if(title)  data.title=req.body.title;
        if(description)  data.description=req.body.description
      const post = await Post.findByIdAndUpdate(req.params.id, {$set:data}, { new: true })
      if (!post) {
        return res.status(404).json({ message: "No post found "})
      }
      return res.status(200).json({ post })
    } catch(error) {
      return next(error)
    }
}