直接删除数据而不刷新react redux中的组件

Question

我试图删除一篇帖子，但看起来每次都必须刷新页面。当我在Chrome中查看React开发工具时，Store也在刷新后进行更新。我需要了解这背后的原因。

所以，我在路由上有一个UserPosts组件，类似于www.abc.com/profile/jimmy/posts。这个页面以卡片的形式展示用户的帖子。它们还有一个删除按钮。

UserPosts.js

import React, { Component } from "react"
import { getUserPosts, getCurrentUser } from "../actions/userActions"
import { connect } from "react-redux"
import Cards from "./Cards"
class UserPosts 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,
userId: state.auth.user._id
}
}
export default connect(mapStateToPros)(UserPosts)

Cards.js

import React, { Component } from "react"
import { connect } from "react-redux"
import { deletePost } from "../actions/userActions"
class Cards extends Component {
handleDelete = (_id) => {
this.props.dispatch(deletePost(_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 className="button is-success">Edit</button>
<button onClick={() => {this.handleDelete(_id)}} className="button is-success">Delete</button>
</div>
</div>
</div>
</div>
)
}
}
const mapStateToProps = () => {
return {
nothing: "nothing"
}
}
export default connect(mapStateToProps)(Cards)

删除后操作

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",
data: deletedPost
})
} catch(error) {
dispatch({
type: "DELETING_POST_FAILURE",
data: { error: "Something went wrong" }
})
}
}
}

后减速器

const initialState = {
isDeletingPost: false,
isDeletedPost: false,
deletingError: null,
postList: []
}

export const post = (state=initialState, action) => {
switch(action.type) {
case "DELETING_POST_START":
return {
...state,
isDeletingPost: true,
deletingError: null
}
case "DELETING_POST_SUCCESS":
const filteredPostList = state.postList.filter(post => post._id !== action.data._id )
return {
...state,
isDeletingPost: false,
isDeletedPost: true,
postList: filteredPostList,
deletingError: null
}
case "DELETING_POST_ERROR":
return {
...state,
isDeletingPost: false,
deletingError: action.data.error
}
default:
return state
}
}

我只需要知道如何解决这个问题，以及为什么它没有像预期的那样发生。谢谢

编辑：我有两个减速器。请忽略上面的一个。这是减速器https://hastebin.com/koqijinabi.coffeescript.

Answer 1

看起来您的mapState是错误的：

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

你的帖子状态看起来像：

const initialState = {
isDeletingPost: false,
isDeletedPost: false,
deletingError: null,
postList: []
}

你没有.isFetchingUserPosts或.userPosts。您确实有isDeletingPost和.postList。

修复您的mapState，使其与您所在州的实际字段名相匹配，这应该会起作用。