Meteor createContainer和Redux

时间:2017-08-14 10:39:30

标签: javascript reactjs meteor redux

我创建了一个Meteor createContainer来包装整个应用以查找Meteor.users()

import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';

import App from './../App.js';

export default AccountContainer = createContainer(() => {
  const _id = Meteor.userId();
  const accountHandle = Meteor.subscribe('userData', _id);
  const loading = !accountHandle.ready();
  const user = Meteor.users.findOne(_id);
  const userExist = !loading && !!user;

  return {
    loading,
    userExist,
    user
  };
}, App);

我需要在App周围使用这些数据来显示/隐藏元素并控制用户私人页面,如控制面板。

我使用Redux来存储来自createContainer的数据,实际上我在App.js文件中执行此操作:

// a few imports here...

class App extends Component {
  render() {
    const { loading, userExist, user } = this.props;
    this.props.updateUser({ loading, userExist, user });

    return (
      <Router history={history}>
        <div className="app">
          <Header />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/signup" component={Signup} />
            <Route exact path="/account" component={Account} />
            <Route exact path="/account/pictures" component={Pictures} />
          </Switch>
          <Newsletter />
          <Footer />
        </div>
      </Router>
    );
  }
};

export default connect(null, { updateUser })(App);

正如您在此处所见,我致电this.props.updateUser({ loading, userExist, user });并更新我的redux商店。

问题是我收到以下错误:

  

警告:setState(...):在现有状态期间无法更新   过渡(例如在render或其他组件内   构造函数)。渲染方法应该是道具的纯函数   州;构造函数的副作用是反模式,但可以移动   到componentWillMount

这是因为我在render() App方法中更新了Redux状态。

我尝试将其包装在setTimeout

之间
setTimeout(() => {
  this.props.updateUser({ loading, userExist, user });
});

这解决了我的问题,但我认为这不是解决问题的最佳解决方案。

我对使用Meteor createContainer更新Redux状态的方式和时间感到困惑。

我希望实现的目标是能够共享应用该信息的应用程序周围的{ loading, userExist, user }数据,即在Account.js中:

const mapStateToProps = (state) => {
  return state.user;
}

export default connect(mapStateToProps)(Account);

感谢。

修改: 刚刚将Redux更新frm render()移至componentDidMount()方法。 它不再显示错误,它在App.js中更新得很好,但在Account.js我没有更新它,看起来好像错过了它:

enter image description here

0 个答案:

没有答案