モデリングリアクティブ状態を

Question

私はReactアプリケーション内でRedux状態をモデル化するためのきれいな方法を探しています。ここで私は、私が本当に嫌いそれを行うことが一つの方法は次のとおりです。

const filmFuncs = { 
    getTitles: function() { 
     return this.currentTitles.map(function(film) { 
      return film.title; 
     }); 
    } 
}; 

const defaultState = { 
    'currentTitles': [], 
    ...filmFuncs, 
}; 

var reducer = (state=defaultState, action) => { 
    switch (action.type) { 
     case "GET_FILMS": { 
      return {...state, currentTitles: action.payload}; 
      break; 
     } 
    } 
    return state; 
}; 

export default reducer; 

だから今、私は（、this.props.films.getTitlesを呼び出すことができます）。私のコンポーネントにロジックを置くのではなく、

また、私は別のモデルクラスを設定し、このような何か、状態を渡すことができます考えていた：

var filmModel = new FilmModel(this.props.films); 
filmModel.getTitles(); 

私はどちらかかかわらず、そのアプローチに本当に熱心ではありませんよ。何かご意見は？

Answer 1

これで、this.props.films.getTitles（）;を呼び出すことができます。 を使用してください。

ロジックをコンポーネントに入れないようにしようとしているのはなぜですか？

このようなロジックは、コンテナ/スマートコンポーネント内に配置するのが最適です。そのようなコンポーネントがRedux状態に接続する場合、getTitles選択を実行し、選択したデータをダムコンポーネントに渡してレンダリングします。

実際にコンポーネントをロジック内に置かないようにするには、スタンドアロンのヘルパー/セレクタファイルに配置してから、セレクタを接続に使用します。柔軟なセレクタを作成するには、再選択のようなライブラリを使用することができます。

ダン・アブラモフによるスマート対ダムコンポーネントの記事を読むことをお勧めします。リンクhere。

コード例：

セレクタファイル：

export const titlesSelector = (state) => state.currentTitles.map(film => film.title) 

コンポーネントファイル：

//Imports 
import { titlesSelector } from "./Selectors" 

//The smart component 

@connect(state => ({ 
    titles: titlesSelector(state) 
})) 
export default class SmartComponent extends React.Component { 

    constructor() { 
    super() 

    this.getTitles = this.getTitles.bind(this) 
    } 

    render (
    return (
     <DumbComponent 
     titles={this.props.titles} 
     /> 
    ) 
) 
} 

// The dumb component 

const DumbComponent = ({ titles }) => 
<ul> 
    {titles.map(title => <li>{title}</li>} 
</ul>