Состояние не обновляется с Redux

0

Я пытаюсь удалить сообщение с 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();
}
  • 1
    должно позволить postId = action.data на самом деле быть что-то вроде action.data._id? Поскольку action.data является объектом, а не идентификатором (action.data.body, action.data.title), в соответствии с остальной частью вашего кода?
  • 0
    Привет! В файле actions.js я передаю id в данные. Я включил файл выше также. Спасибо
Показать ещё 4 комментария
Теги:
ecmascript-6
react-redux
redux

1 ответ

1
Лучший ответ

Мне удалось решить эту проблему!

Поэтому после выхода некоторых данных я узнал, что при добавлении сообщения он не включал id из базы данных, только когда я перезагрузил страницу, сообщения включали id потому что он вызывает API.

Поэтому, когда пользователь добавляет сообщение через форму, я затем создаю id который отправляется в API, а затем отправляется в хранилище Redux.

Также благодарим вас за ваши предложения, которые очень ценятся.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню