在路线更改时反应通量重置存储值

Question

我有简单的 React 和 Flux 实现。我正在创建带有操作和存储的新 post 但问题是如果用户转到另一条路线并返回 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>
    );
  }
});

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

Answer 1

您可以使用为您执行此操作的 recycle 方法 -

如果您希望将特定或所有商店的状态重置回其原始初始状态，您可以调用回收。 Recycle 需要一些你想重置的商店。如果未提供任何参数，则所有商店都将被重置。

 componentWillUnmount() {
    NewPostStore.unlisten(this.onChange);
    alt.recycle(NewPostStore);
  }

在路线更改时反应通量重置存储值

React flux reset store value on route change

javascript

reactjs

reactjs-flux

flux

react-router