状态未使用 Redux 更新答案

【问题标题】：State not updating with Redux状态未使用 Redux 更新
【发布时间】：2016-06-18 12:43:07
【问题描述】：

我正在尝试使用 Redux 删除帖子，但是当我这样做时状态没有更新，只有当我重新加载页面时，我才能删除随后显示的帖子。

请在此处查看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();
}

【问题讨论】：

应该让 postId = action.data 实际上类似于 action.data._id 吗？由于 action.data 是一个对象而不是一个 id（action.data.body，action.data.title），根据你的代码的其余部分？
嗨，在actions.js 文件中，我将id 传递到数据中。我也包含了上面的文件。谢谢
删除的调用是否正确？还有你为什么要case 'STORE_POSTS': return [...action.data]？
操作不应修改您的数据。他们应该简单地传递它。他们的目的是描述某事发生的事实。 Reducers 负责修改该数据。
嗨 Abhinav，这个动作在 API 调用成功时被分派，然后它返回 [...action.data] 就像在 reducer 中一样。

标签： javascript reactjs ecmascript-6 redux react-redux

【解决方案1】：

我已经设法解决了这个问题！

因此，在注销一些数据后，我发现添加帖子时它不包含数据库中的id，只有当我重新加载页面时，帖子才包含id，因为它调用了API。

因此，当用户通过表单添加帖子时，我会创建一个id，该id 会发布到 API，然后发送到 Redux 商店。

也感谢您的建议，非常感谢。

【讨论】：