reactjs - 如何在 React Redux 中创建临时状态？

Question

我已经使用 Redux 一个月了，当项目变得非常大时，似乎没有必要将整个应用程序暴露给每个Reducer 的所有值。有没有好的方法来创建临时状态或为组件创建单独的状态？

我的想法是错误的还是这样的结构是有原因的？

Answer 1

我假设“每个 reducer 的值”指的是整个应用程序状态。

您当然可以分割您的状态并仅将必要的部分公开给特定组件。这就是 react-redux 绑定(bind)中的 connect 方法的用途。 connect 接受一个函数(例如 mapStateToProps)，该函数反过来接受您的整个应用程序状态，并仅公开您指定为要“连接”到 redux 的组件的 props。

例如，假设您有一个像这样的简单 React 组件，它显示用户的姓名和地址:

var myComponent = React.createClass({
  render: function() {
    return (
      <div>{Name from redux state goes here}</div>
      <div>{Address from redux state goes here}</div>
    );
  }
});

显然，您不需要将整个应用程序状态发送到此组件，只需将包含用户姓名和地址的部分发送即可。所以你可以像这样使用connect:

// the "state" param is your entire app state object.  
function mapStateToProps(state) {
  return {
    name: state.name,
    address: state.address
  }
}

var connectedComponent = connect(mapStateToProps)(myComponent);

包装后的myComponent现在实际上看起来像这样:

var myComponent = React.createClass({
  propTypes: {
   name: React.PropTypes.string // injected by connect
   address: React.PropTypes.string // injected by connect  
  },

  render: function() {
    return (
      <div>{this.props.name}</div>
      <div>{this.props.address}</div>
    );
  }
});