Question

在我的React + Redux客户端应用程序上，我需要获取活动的用户信息（从myapp.com/users/me获取）并将其保存在某处，以便我可以从多个组件访问它。

我猜window.activeUser = data不是最好的做法。但我找不到任何关于这样做的最佳做法的资源。做我想做的最好的方法是什么？

Answer 1

您可以将其保存在单独的缩减器中，然后在组件中使用connect()导入州的多个部分。

假设您在设置商店时有2个名为users.js和tags.js的缩减器与combineReducers合并。您可以通过将函数传递给connect()调用来简单地拉出不同的部分。所以使用es6 +装饰器：

const mapStateToProps = state => {
  return {users: state.users, tags: state.tags}
}

@connect(mapStateToProps)
export default class MyComponent extends React.Component {

然后在render函数中向下：

return (
  <div>
    <p>{this.props.users.activeUsernameOrWhatever}</p>
    <p>{this.props.tags.activeTags.join('|')}</p>
  </div>
);

因此，您的不同缩减器状态将成为this.props上的对象。

Answer 2

您可以使用React的context，HOC或全局变量，通过上下文将数据提供给多个组件

像...一样的东西。

class ParentDataComponent extends React.Component {
   // make data accessible for children
  getChildContext() {
    return { 
      data: "your-fetchet-data"  
    };
  }

  render() {
    return < Child />
  }
}

class Child extends React.Component {
  render() {
    // access data from Parent's context
    return (<div> {this.context.data} </div>); 
  }
}

Answer 3

创建一个动作创建者并在相应组件的componentWillMount上调用它，使其在组件安装之前运行，并在动作创建器中获取所需的数据并将其传递给reducer。在该reducer中，您可以在整个应用程序中保留所需的数据。因此，只要您需要数据，就可以从redux状态检索它。来自官方redux网站的this教程涵盖了您需要了解的所有内容。如果你有任何问题，请提及我。

在React + Redux客户端应用程序上保留活动用户数据的位置

3 个答案: