締めよレデューサーとアクション

Question

背景

私は角度がために病気に適したプロジェクトのために/ Reduxのを反応させるために移動し、角度の1.xとの1年半の経験を持っています。 ReactはAngularの「基本的にすべての指令」だと読んだことがありますが、これは素晴らしいことです。私は指令がAngularの最も強力な機能だと思っています。しかし、React/Redux vs. Angularでのアプリケーション作成の心構えも非常に異なっています（データバックボーンを作成し、それを表現するアイデアと比較して、Angularのあまり集中しないアプローチ）。私は何か問題を理解していることがあります。

セットアップ

アプリケーションは苗木として、以下のものを使用して、電子に書かれている：ギャラリーがあり

root: { 
    Home: Object, // Basic homepage tab 
    Gallery: [ // Gallery tab 
    { // A single instance of "photo" object 
     filename: String, 
     metadata: Object, 
     error: Object 
    } 
    ] 
} 

：https://github.com/chentsulin/electron-react-boilerplate

マイルート減速は次のようになりますディレクトリを開く関数。ユーザーが選択したディレクトリをスキャンし、そこに写真を探し、ファイル名の配列を受け取ります。次に、すべての写真をコンポーネントとしてレンダリングすることになっており、各写真はファイル名で初期化されると、画像メタデータを読み込み、ページ上に独自の情報を表示する独自のプロセスを開始する必要があります。

ページのすべてのファイル名を問題なく表示できるようになった。しかし、レンダリングされた写真や加工された写真に変換するには、ファイル名が必要です。それが私が困っているところです。上記のビットで見られるように

問題

写真は、いくつかのプロパティを持っています。また、いくつかのアクション（例：new、update、deleteなど）があります。プロパティとアクションをコンポーネントに関連付ける必要があります。通常、ページサイズのコンポーネントでは、これはJSファイルで行われ、connectとbindActionCreatorsの呼び出しがすべて行われます。このJSファイルは、反応ルータに含まれ、ページとして表示されます。

写真はページではありません。彼らは、ページにたくさんある再利用可能なコンポーネントを意味しています。どのように写真のすべてのプロパティとアクションを正しく添付するには？

Answer 1

あなたのワイヤがモデル/アクション/レデューサーに交差しているようです。 Angularや他のフレームワークとは異なり、あなたのモデルは単なるデータであるという点で "ダム"にする必要があります。 GalleryまたはPhotoオブジェクトにはメソッドがありません。むしろ、ビューはアクションを起動します。アクションは、モデルを保持するストアを更新するためにレデューサーが使用し、読み込まれてビューにプッシュバックされます。 MVVM（MVV *？）とは異なり、モデル（ストア状態）はコンポーネントの構造を模倣する必要はありません。むしろ純粋なデータを維持するだけです。したがって、HomeとGalleryのプロパティを持つことは意味をなさないかもしれません。

はのは、このようなあなたの減速を再考してみましょう：

const initialState = { 
    photos: [] 
}; 

export default function reducer(state = initialState, action) { 
    switch (action.type) { 
    case 'DELETE_PHOTO': 
     return { 
     photos: state.photos.filter(photo => photo.filename !== action.payload.filename) 
     }; 
    // etc. 
    } 

    return state; 
} 

今、あなたのビューは次のようなものが考えられます。

import deletePhoto from '../actionCreators/deletePhoto'; 

function Photo({ filename, onDelete }) { 
    return (
    <div> 
     <img src={filename}/> 
     <button onClick={() => onDelete(filename)}>Delete</button> 
    </div> 
); 
} 

function PhotoGallery({ photos, deletePhoto }) { 
    return (
    <div> 
    { 
     photos.map(photo => <Photo filename={photo.filename} onDelete={deletePhoto}/>); 
    } 
    </div> 
); 
}; 

const mapStateToProps = state => ({ photos: state.photos }); 
const mapActionsToProps = { deletePhoto }; 

export default connect(mapStateToProps, mapActionsToProps)(PhotoGallery); 

...その後、あなたのアクションの作成者deletePhotoのようなものが考えられます。

より細かい部分にあなたの減速を破壊

export default function deletePhoto(filename) { 
    return { type: 'DELETE_PHOTO', payload: { filename } }; 
} 

お勧めしますが、代わりにあなたのモデルを増強することによって、あなたはcombineReducersのようなものを使用することができることをやってのさ。

私は、MVVMを取り除き、磁束パターンを本当に理解してみることをお勧めします。私はそれがより良いパターンだと言っているわけではありませんが、あなたがレフィックスで別のパターンを使用しようとすると、あなたは本当に穀物に逆らっています。