Redux：日付書式設定ロジックはどこに配置する必要があります

Question

私の質問は簡単です。

私が最終的にユーザーに01/02/2017と表示するDateオブジェクトがあるとします。 DateからStringへの変換をどこで行う必要がありますか？私はかもしれないので、明らかに、Dateとして格納なければならない

（ストア内）マイ状態をレンダリングするビューの一部としてプレゼンテーションコンポーネントでコンテナコンポーネント

でmapStateToPropsで

1. 、他の場所に別の書式で表示する必要があるため、DateからStringに変換する必要があります。

   1の利点は、プレゼンテーションコンポーネントを可能な限りダムにすることです。

   2の利点は、レンダリングロジックがプレゼンテーションコンポーネントにとどまっていることです。

   私はこのタイプのロジックが属する場所がわからないんだけど（別の例では、Stringが$と.00を追加するIntegerから書式をお金になります）。

Answer 1

興味深い質問で、私は両方のオプションを守ることができました。私は通常、私のレデューサーの隣にあるファイル（例えば、 "アヒル"やモジュールを使用している場合）にあるセレクタを使用して、mapStateToProps機能さえもダムにします。

ただし、コンテナやその子供の一部がその小道具を使用して計算を実行する必要がある場合は、文字列ではなくDateオブジェクトが必要です。番号/お金と同じです。要約、集計、または数量を引く必要がある場合、文字列は機能しません。

Answer 2

このロジックをcomponentWillReceivePropsライフサイクルメソッドに含める方が適切です。したがって、新しい小道具を入手するたびに、フォーマットロジックが実行され、ローカルコンポーネントの状態変数が更新され、これがレンダリングされます。サンプルコードは以下の通りである：

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

}