javascript - 如何在react redux表单中成功创建帖子后刷新列表

Question

我对 React 和 Redux 很陌生，并试图测试 https://github.com/rajaraodv/react-redux-blog 。我想要做的是将新博客文章和博客文章列表放在 PostsIndex 中，如下所示，

PostsIndex.js

class PostsIndex extends Component {
  render() {
    return (
      <div>
        <HeaderContainer type="posts_index"/>
        <ValidateEmailAlertContainer/>
        <PostsNew />
        <PostsList />
      </div>
    );
  }
}

我的问题是如何在 PostsNew 成功保存后刷新 PostsList。

Answer 1

在React中执行此操作的方式是通过props，PostsIndex应该保存帖子列表并将其传递给PostsList。 PostsNew 可以接收回调作为 prop，并在添加新帖子时调用它。像这样的事情:

  class PostsIndex extends Component {
        constructor() {
            this.state = { posts: [] };
            this.postAdded = this.postAdded.bind(this);
        }

        postAdded(newPost) {
            let { posts } = this.state;
            posts.push(newPost);
            //This will trigger a rerender and the PostList will 
            //receive the new posts list.
            this.setState({posts: posts});
        }

        render() {
            let { posts } = this.state;
            return (
            <div>
                <HeaderContainer type="posts_index"/>
                <ValidateEmailAlertContainer/>
                {/* Inside the PostsNew component you should call this.props.onSave */}
                <PostsNew onSave={this.postAdded}/>
                {/* Here you pass along the list of posts */}
                <PostsList posts={posts}/>
            </div>
            );
        }
    }