为什么不应该将 redux 存储状态存储在本地组件状态中？答案

【问题标题】：Why shouldn't you store redux store state in your local component state?为什么不应该将 redux 存储状态存储在本地组件状态中？
【发布时间】：2017-02-23 11:23:02
【问题描述】：

我之前曾向question 询问过与 Redux 状态结合使用的 react 组件状态。下面的第一条代码链是我解决问题的原始建议，第二条是我得到的答案，建议我不要复制 redux 状态。这是因为复制速度很慢吗？并且在本地状态中存储尽可能少然后JS负责排序会更快吗？

在相关说明中，感觉很奇怪，第二条代码链要求我始终使用将返回对象的函数。这是唯一的出路吗？我知道在React.createClass 中，您可以存储变量来保存对象等，但是使用 es6 的扩展组件版本，您似乎必须使用函数。有没有办法解决这个问题，或者就是这样？

const Table = React.createClass({
  getInitialState () {
    return {contacts: []}
  },
  componentWillReceiveProps () {
    this.setState({ contacts: this.props.data.contacts})
  },
  sortContacts (parameter, e){
    ...
  },
  render () {
    return (
      <table>
        <thead>
          <tr>
            <th onClick={this.sortContacts.bind(this, "firstName")}>First Name</th>
          </tr>
        </thead>
        <tbody>
          {contactRows}
        </tbody>
      </table>
    )
  }
})

对比

const Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sortBy: 'id' // default sort param
    }
  }

  sortContacts(param) {
    this.setState({ sortBy: param})
  }

  sortedContacts() {
    return this.props.contacts.sort(...); // return sorted collection
  }

  render() {
    return (
      <table>
        <thead>
          <tr>
            <th onClick={() => this.sortContacts("firstName")}>First Name</th>
          </tr>
        </thead>
        <tbody>
          {this.sortedContacts()}
        </tbody>
      </table>
    )
  }
}

【问题讨论】：

这个问题与 Redux 存储有关，但提供的代码是 React.js 唯一代码，根本没有实现 Redux 存储。

标签： javascript reactjs ecmascript-6 redux react-redux

【解决方案1】：

首先让我澄清你的疑问，什么时候应该使用 React 组件状态，

如果仅在组件处于活动状态时存储某些内容，请使用反应状态。
如果您希望某人看到与他们之前离开时相同的组件 ui，即使在对其他组件执行一些其他操作后返回时也可以使用 Redux。

现在关于您的数据过滤我们同时使用 State 和 Redux..

我们使用状态来过滤姓名中的数据，因为我们不希望他在返回页面时看到相同的过滤数据，因为这会造成混乱
为了过滤价格数据或其他过滤器，我们将实际数据存储在 Redux 中并过滤数据。
由于我们将实际数据存储在 redux 和过滤器中，因此我们在将数据发送到组件之前（即在 MapStateToProps 中）应用过滤器算法。例如数据：getFilteredData（state.somestate.data，state.somestate.filters）其中 getFilteredData 是一个接受数据并过滤并返回过滤数据的函数

【讨论】：

【解决方案2】：

您的代码中没有 Redux，您的问题似乎与 Redux 无关。

第二个代码块使用 ES6 类。谷歌一下，看看你能用它们做什么。

在 Redux 中，组件最好是无状态的。它们从 Redux 或 parent 接收数据，并且什么也不存储。所以没有setState。该表不会对任何内容进行排序（它会接收排序天数作为道具），或者它可能会但它不会是状态，它会在render 中对其进行排序。当然它会排序一个副本，而不是传入的prop。

这些事情听起来很疯狂，当然。每次渲染都抱歉？性能怎么样，伙计们！？答案是记忆。使用选择器（重新选择包）。

在 Redux 中存储每一位数据的原因是：单一事实来源。它允许时间旅行和热重装。记录。状态保存/恢复。它可以防止在哪些数据是最新的或正确的数据上出现分歧。还有更多，但这个问题太多了。

【讨论】：