Redux: Wo sollte ich die Datumsformatierungslogik platzieren?

Question

Meine Frage ist einfach, wo sollte ich Logik ähnlich der Datumsformatierung setzen?

Nehmen wir an, ich habe ein Date Objekt, das ich schließlich als 01/02/2017 dem Benutzer anzeigen werde. Wo soll ich die Konvertierung von Date zu String machen?

1. in mapStateToProps in der Behälterkomponente
2. in der Präsentations-Komponente als Teil der Ansicht Rendering

offensichtlich Mein Zustand (im Speicher) speichert als Date sein sollte, da ich könnte Ich muss es mit anderen Formatierungen an anderen Stellen präsentieren, also muss ich von Date zu String konvertieren.

Der Vorteil von 1 ist, dass es die Darstellungskomponente so dumm wie möglich macht.

Der Vorteil von 2 ist, dass die Rendering-Logik in der Präsentationskomponente bleibt.

Ich bin nicht sicher, wo diese Art von Logik gehört (wäre ein weiteres Beispiel Geld von Integer Formatierung zu String$ und .00 hinzufügen).

Answer 1

Interessante Frage, ich könnte beide Optionen verteidigen. Ich würde normalerweise einen Selektor verwenden, der in einer Datei neben meinem Reduzierer lebt (wenn Sie beispielsweise "Enten" oder Module verwenden), so dass selbst die mapStateToProps-Funktion dumm ist.

Wenn jedoch eine Chance besteht, dass Ihr Container oder einige seiner Kinder Berechnungen mit dieser Stütze durchführen müssen, benötigen sie das Objekt Date, keine Zeichenfolge. Gleich mit der Anzahl/Geld. Wenn Sie die Menge zusammenfassen, aggregieren oder subtrahieren müssen, funktioniert die Zeichenfolge nicht.

Answer 2

Es ist besser, diese Logik in die Lebenszyklusmethode componentWillReceiveProps einzubeziehen. Wann immer Sie neue Requisiten bekommen, wird die Datumsformatierungslogik ausgeführt und die Statusvariable der lokalen Komponente aktualisiert, die wiederum gerendert wird. Beispielcode ist wie folgt:

class ABC extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state= { dateVar: this.props.dataVar } 
    } 
    componentWillReceiveProps(nextProps) { 
    //date formatting logic goes here 
    this.setState({ dateVar: <formatted-date> }) 
    } 
    render() { 
     return(
     <div>{this.state.dateVar}</div> 
    ) 
    } 

}