Redux Präsentations Eigenschaften ähnlich wie Dekorateur Muster

Question

Sagen Sie den Zustand unserer Applikationsbehälter so ist (direkt aus dem Server):

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

Wir geben unsere Daten bis auf die Präsentations-Komponente, aber die Designer haben für ein gefragt Großgeschriebener vollständiger Name und verschleierte E-Mail.

So wollen wir so etwas wie machen:

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

Wie sollte wir behandeln rein Präsentations Transformationen der Daten in der Reaktion/Redux Welt?

aus der Rails Welt kommt, würde ich wie unter einer Dekorateur Funktion in der Präsentationskomponente hinzuzufügen, so dass sie die Präsentationskomponente Verantwortung sind Eigenschaften hinzuzufügen, die gemacht werden, ... nicht die Minderer oder Container-Komponente:

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)) 
    } 
} 

Aber das scheint ein Anti-Pattern zu sein? Warum? Was sind die Schattenseiten dieses Ansatzes? Diese fühlt sich sauber zu mir, da die zugrunde liegenden Daten/Status nicht geändert wird, die untergeordnete Komponente, fügt einfach Präsentationseigenschaften zu den Daten, die es empfängt.

Answer 1

Ich bin mir nicht sicher, was Sie als ein Anti-Muster bezeichnen. Diese Linie ist verwirrend:

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

, weil Sie nicht this.state benötigen, wenn Sie Sachen in der Redux Speicher sind zu speichern. In jedem Fall sind Transformationen in der mapStateToProps Funktion von react-redux sehr sinnvoll.

connect(state => ({ persons: state.persons.map(decorate) })) 
(
    props => 
    <div> 
     {/* do something with props.persons in presentation */} 
    </div> 
) 

Das ist eine ganz logische Sache zu tun, in der Tat ist es so üblich, dass eine Bibliothek gibt es die staatliche memoizes verwandelt exakt für diesen Zweck in Kombination mit redux: https://github.com/reactjs/reselect