路径变化时的反应磁通重置存储值

时间:2015-05-01 15:32:51

标签: javascript reactjs reactjs-flux flux react-router

我有简单的反应和通量实现。我正在创建包含动作和商店的新帖子,但问题是如果用户转到另一条路线并返回 this.postAdded 仍然是相同的值。

商店:

class NewPostsStore {
  constructor() {
    this.title = '';
    this.body = '';
    this.postAdded = false;

    this.bindListeners({
      createPost: PostsActions.createPost
    });
  }

  createPost(res) {
    this.postAdded = res.add;
  }
} 

行动:

class PostsActions {
  getPosts() {
    $.ajax({
      url: url
    }).then((posts) => {
      this.dispatch(posts);
    });
  }
  createPost(post) {
     $.ajax({
      type:'POST',
      data: post,
      url: url
    }).then((res) => {
      this.dispatch(res);
    });
  }
}

module.exports = Blog.createActions(PostsActions);

组件:

export default React.createClass({
  mixins: [addons.LinkedStateMixin],
   getInitialState() {
    return NewPostStore.getState();
  },
   onChange() {
    this.setState(NewPostStore.getState());
   },
  componentDidMount() {
    PostsActions.getPosts();
    NewPostStore.listen(this.onChange);
  },
  componentWillUnmount() {
    NewPostStore.unlisten(this.onChange);
  },

  submit(e) {
    e.preventDefault();
    PostsActions.createPost({
      title: this.state.title,
      body: this.state.body
    });
  },
  setMessage() {
    if(this.state.postAdded) {
      return <h5>success</h5>
    } else {
      return <h5>failed</h5>
    }
  },
  render() {
    return (
      <div>

        <form onSubmit={this.submit}>
           <input type="text" placeholder="Enter Title" valueLink={this.linkState('title')} />
           <input type="text" placeholder="Enter Body" valueLink={this.linkState('body')}/>
           <button>Create</button>
        </form>

         {this.setMessage()}
      </div>
    );
  }
});

如何在转到其他视图时重置状态?

0 个答案:

没有答案