组件应该如何访问存储中的数据？

Question

在我的 React 应用程序中，当用户登录时，他们的用户数据设置为 UserStore.currentUser。组件应该如何访问UserStore.currentUser?

组件访问此数据似乎有 4 个选项。哪个（如果有的话）是正确的？

选项 1：将其设置为组件的 "state"

  var ProfilePicture = React.createClass({
    getInitialState: function(){
      return {
        currentUser: UserStore.currentUser
      }
    },
    render: function(){
      return <h1>Hi my name is {this.currentUser.name}</h1>;
    }
  });

选项 2：直接访问商店的属性

var ProfilePicture = React.createClass({
  render: function(){
    return <h1>Hi my name is {UserStore.currentUser.name}</h1>;
  }
});

选项 3：通过 getter 方法

访问商店的属性

var ProfilePicture = React.createClass({
  render: function(){
    return <h1>Hi my name is {UserStore.getCurrentUser().name}</h1>;
  }
});

选项 4：在根组件的状态中设置 currentUser。作为道具传递给所有其他人

var App = React.createClass({
  getInitialState: function(){
    return { currentUser: UserStore.currentUser };
  },
  render: function(){
    return <div>
      <ThingA />
      <ThingB />
      <ProfilePicture userName={this.state.currentUser.name} />
    </div>;
  }
});

var ProfilePicture = React.createClass({
  render: function(){
    return <h1>Hi my name is {this.props.userName}</h1>;
  }
});

Answer 1

在这种情况下，我认为这不是一个特别好的主意。如果 name 发生变化怎么办？最好将 connect 存储到视图（组件容器）并通过道具将 name 传递给 ProfilePicture。这使您的组件保持解耦。这也使得测试更容易。

就 React 0.14 而言，我会这样写：

export default ({name}) => <h1>{`Hi my name is ${name}`}</h1>

基于函数的组件定义仅适用于简单的情况。

Answer 2

您的商店包含可以像

一样为您返回数据的方法

getUserinfo:function()
{
  return currentUser;
}

现在您可以访问您需要的任何组件，只需像

这样调用商店

var UserStore=require('./UserStore);

var currentuser=UserStore.getUserinfo();

Answer 3

mixins: [
    Reflux.listenTo(UserStore,'onSessionChange'),
    ],
getInitialState() {
    return {
        name: '',
        other: ''
    };
},
componentDidMount() {
    UserActions.getUserInfo();
},
onSessionChange(userInfo) {
    this.setState({
        name: userInfo.name,
        other: userInfo.other
    })
},

因为你用的是refluxjs，我觉得在component中监听数据变化比较好

组件应该如何访问存储中的数据？

How should a component access data from a store?

reactjs

refluxjs