CODEWITHSUNDEEP
javascriptreactjsreduxredux-form
Pyae Phyoe Shein
Pyae Phyoe Shein

Reputation: 13787

How to refresh list after successfully created post in react redux form

I'm very new to react & redux and trying to test https://github.com/rajaraodv/react-redux-blog. What I want to do is I want to put together New Blog Post and Blog Post List in PostsIndex as follow,

PostsIndex.js

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

My problem is how to refresh PostsList after PostsNew is successfully saved.

Upvotes: 1

Views: 3553

Answers (1)

Tiago Engel
Tiago Engel

Reputation: 3663

The way you do that in react is via props, PostsIndex should hold the list of posts and pass it to PostsList. PostsNew could receive a callback as a prop, and call it when a new post is added. Something like this:

  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>
            );
        }
    }

Upvotes: 2

Related Questions