Question

说我们的应用程序容器的状态是这样的（直接来自服务器）：

[
  {first: 'tyrion', last: 'lannister', email: 'tmoney@lannister.com'},
  {first: 'jaime', last: 'lannister', email: 'jaime@lannister.com'}
]

我们将数据交给演示组件，但设计师要求提供大写的全名和混淆的电子邮件。

所以我们要渲染类似的东西：

<div>
   <p>Tyrion Lanniser - tmoney@***.com</p>
   <p>Jaime Lanniser - jaime@***.com</p>
</div>

应该我们如何处理react / redux世界中数据的纯粹表示转换？

来自Rails世界，我会在演示组件中添加一个装饰器函数，如下所示，以便演示组件负责添加渲染的属性...而不是reducer或容器成分：

const decorate = (person)=> {
  return {
    ...person,
    _full_name: capitalize(person.first_name + ' ' + person.last_name),
    _email: obfuscate(person.email)
  }
}

# ...
constructor(props) {
  super(props)

  state = {
    persons: this.props.persons.map((person)=> decorate(person))
  }
}

但这似乎是一种反模式？为什么？这种方法的缺点是什么？这个感觉干净，因为基础数据/状态没有改变，子组件只是将表示属性添加到它接收的数据中。

Answer 1

我不确定你所说的反模式。这条线令人困惑：

this.state.persons = this.opts.persons.map((person)=> decorate(person))

因为如果你在redux商店中存储东西，你不需要this.state。在任何情况下，转换在mapStateToProps的{{1}}函数中都很有意义。

react-redux

这是一个完全合乎逻辑的事情，实际上它是如此常见，以至于有一个库与redux一起为这个目的记忆状态变换：here

Redux表示属性类似于装饰器模式

1 个答案: