如何在 ReactRedux 中创建临时状态？

Question

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

是我的想法全错了，还是出于某种原因采用这种结构？

Answer 1

The state of your whole application is stored in an object tree within a single store.

一个州。一间店。而已。您可以在由较大的应用程序状态通知的各个组件中创建本地状态，但此时您只是复制已经存在的较大状态的部分。

请记住，在复杂的应用程序中，您不会让 "smart" 组件可以使用整个状态。即使你有 100 个 reducer 函数，当你 connect a component to the store 时，你可以使用 mapStateToProps 只选择你想要的应用程序状态部分，并从中为你的组件创建道具。所以你永远不会看到你不使用的状态的所有部分，即使你在脑海深处知道它们存在。

这真是一个很棒的架构模式。对于一个州，您有一个 single source of truth。因此，您的应用程序的任何部分都不可能拥有陈旧数据。请记住，您只是在初始化应用程序状态时定义状态 structure，而不是加载所有 data。因此，在开始时初始化整个结构不会影响性能。再说一次，你永远不会将整个应用程序状态加载到一个组件中（除非它需要）所以你的道具将始终是可管理的。

Answer 2

我假设 "values of every reducer" 你指的是整个应用程序状态。

您当然可以将您的状态切分并仅将必要的部分公开给特定组件。这就是 react-redux 绑定中的 connect 方法的用途。 connect 采用一个函数（例如 mapStateToProps），该函数反过来会获取您的整个应用程序状态，并仅将您指定为道具的部分公开给您 "connecting" 到 redux 的组件。

例如，假设您有一个像这样显示用户姓名和地址的简单 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>
    );
  }
});

如何在 ReactRedux 中创建临时状态？

How to create temporary States in ReactRedux?

reactjs

redux