Я пытаюсь удалить сообщение с Redux, но состояние не обновляется, когда я это делаю, только когда я перезагружаю страницу, я могу удалить сообщения, которые затем отображаются.
См. App.js
компонент App.js
...
import React from 'react';
import { connect } from 'react-redux';
import PostForm from './PostForm';
import { getPosts, deletePost } from '../actions/actions';
class App extends React.Component {
componentDidMount () {
this.props.getPosts();
}
_getPostId(evt) {
const postId = evt.target.parentNode.parentNode.getAttribute('data-id');
this.props.deletePost(postId)
}
render() {
const posts = this.props.postsData.map( (index) => {
return (
<tr data-id={index._id}>
<td> {index.title} </td>
<td> {index.body} </td>
<td> <button className="btn btn-primary" onClick={this._getPostId.bind(this)}>Delete</button> </td>
</tr>
)
});
return (
<div>
<nav className="navbar navbar-default navbar-static-top">
<div className="container">
<a className="navbar-brand">Blog Admin</a>
</div>
</nav>
<div className="container">
<PostForm />
<table className="table">
<thead>
<tr>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
<tbody>
{posts}
</tbody>
</table>
</div>
</div>
)
}
}
export default connect(state => state, { deletePost, getPosts })(App);
Пожалуйста, смотрите мой файл reducers.js
ниже...
export const postsData = ( state = [], action ) => {
switch ( action.type ) {
case 'GET_POSTS':
return state;
case 'STORE_POSTS':
return [...action.data]
case 'ADD_POST':
let newPost = {
title: action.data.title,
body: action.data.body
}
return state.concat( [newPost] )
case 'DELETE_POST':
let postId = action.data;
return state.filter(p => p._id !== postId)
default:
return state;
}
}
Пожалуйста, файл actions.js
ниже...
import store from '../store/store.js';
export function getPosts() {
apiPostCall();
return { type: 'GET_POSTS' };
}
export function addNewPost(post) {
apiAddPost(post);
return { type: 'ADD_POST', data: post }
}
export function deletePost(postId) {
apiDeletePost(postId);
return { type: 'DELETE_POST', data: postId }
}
function apiPostCall() {
$.ajax({
method: "GET",
url: "/api/posts",
dataType: "json"
}).success(data => store.dispatch({ type: 'STORE_POSTS', data }))
}
function apiAddPost(post) {
$.ajax({
method: "POST",
url: "/api/posts",
data: post,
dataType: "json"
}).success()
}
function apiDeletePost(postId) {
$.ajax({
method: "DELETE",
url: "/api/posts/" + postId,
}).success();
}
Мне удалось решить эту проблему!
Поэтому после выхода некоторых данных я узнал, что при добавлении сообщения он не включал id
из базы данных, только когда я перезагрузил страницу, сообщения включали id
потому что он вызывает API.
Поэтому, когда пользователь добавляет сообщение через форму, я затем создаю id
который отправляется в API, а затем отправляется в хранилище Redux.
Также благодарим вас за ваши предложения, которые очень ценятся.
actions.js
я передаюid
в данные. Я включил файл выше также. Спасибо