ReactJSローカルとグローバルな状態を比較し、後でreduxを実装する

Question

プロジェクトでは約2ヶ月です。私が今までコードライターを管理していて、コードを自分で書いたことは初めてです。私は先週の彼らのコードを読んできました。単純なReactアプリであると思われていたものがスパゲッティ混乱に変わった。

私は理解します：reduxはグローバルな状態を管理するのに役立ちます。しかし、それは、すべてのボタンをグローバルな「アクション」にマッピングする必要があるということですか？これは、アプリケーション全体に散らばったオブジェクトのこの完全な混乱を作成するように見えました。私はローカルの状態がアプリケーションの90％のために使用できるときに、なぜ私たちがすべてのものに対してグローバルな状態を使用しているのか、自分自身に尋ね続けます。

let subitems = SidebarItems[state.type].sub_items; 
Store.dispatch(SidebarSubItemHandler(item.action, subitems[0], null)); 

if(item.sub_items[subitems[0]].param) { 
    browserHistory.push(`${item.sub_items[subitems[0]].path}/${item.sub_items[subitems[0]].param}`); 
} else { 
    browserHistory.push(item.sub_items[subitems[0]].path); 
} 

subItembuttons = Object.keys(this.props.subitems.sub_items).map(subitem => { 
    let subItem = this.props.subitems.sub_items[subitem]; 
    return <li className={this.props.activeSubItem.action == subItem.action ? "bottom-bar-item active" : "bottom-bar-item"} 
       onClick={e => this.props.onClickSubItem(e, subItem)} 
       key={subItem.action} style={this.props.subitems.inlineStyles.mobileSubItemLI}> 
     <a href="">{subItem.item}</a> 
    </li>; 
}); 

アプリケーションは、「アクション」のオブジェクトにマッピングこれらのようなオブジェクトのすべての種類が散らばっている：これは私に胸焼けを与えるコードの一種です。この時点で、プロジェクト全体をスクラップし、ゼロから再開することを決定していますが、コストはかかりません。地元の州だけを使ってできるだけ多くしようとしましょう。時が来て、何かのためにグローバルな状態が必要な場合は、アプリ内のすべてのアクションではなく、そのためにのみ実装してください。これは理にかなっていますか？

私の質問は、地域の州を使用して基本的なReactを使用してアプリを開発すると、1アイテム単位でreduxを実装できないような不可逆的な問題が生じるのだろうか？ http://redux.js.org/docs/faq/OrganizingState.html#organizing-state-only-redux-stateに関連ReduxのFAQエントリから引用

Answer 1

：ローカルコンポーネントの状態を使用して

は結構です。開発者としては、アプリケーションを構成する国の種類と、各国家がどこに住んでいるのかを判断するのはあなたの仕事です。あなたのために働く残高を見つけて、一緒に行く。

再来に置かれるべきデータの種類determingのための親指のいくつかの共通のルール：

• は、このデータについてのアプリケーション・ケアの他の部分ですか？
• この元のデータに基づいてさらに派生データを作成する必要がありますか？
• 複数のコンポーネントを駆動するために同じデータが使用されていますか？ この状態を特定の時点（つまり、タイムトラベルのデバッグ）に戻すことができますか？
• データをキャッシュしますか（つまり、データを再要求するのではなく、すでに存在する状態を使用しますか？）
あなたの特定の質問パー

：あなたはかなり一貫して「コンテナコンポーネント」パターンを使用している場合、それはラインの下の再来に接続されたコンテナのためのそれらの「プレーンリアクト」コンテナを交換することは比較的簡単です。 「コンテナ/プレゼンテーションコンポーネント」パターンの記事については、https://github.com/markerikson/react-redux-links/blob/master/react-component-patterns.md#component-categoriesを参照してください。

他の2つの考え。まず、私は最近、why you might want to use Redux in a React applicationについて論じる記事を共著しました。

2番目：はい、そのコードはちょっと醜いです。私は、それらがコードベースの異なる部分から少なくとも3つの異なるスニペットであることを期待しています。スニペットは1つではありませんが、読みにくいです。 "sub_items"と "subitems"を繰り返し使用すると、赤旗のように見えますが、わかりやすくなります。

Reduxの優れた実践に従っているようにも見えません。たとえば、慣用のReduxコードは、ストアを直接参照することはほとんどありません。代わりに、dispatchとgetStateへの参照はミドルウェアを介して利用できるため、redux-thunkとredux-sagaでアクションクリエイターで使用できます。接続されたコンポーネントはdispatchにもアクセスできます。

全体：あなたは、Reduxを必要以上に、あるいはローカルコンポーネントの状態を必要以上に使用することは絶対に歓迎します。しかし、大きな問題は、あなたのチームがReduxを実際に理解していること、そしてどのように使用しているかです。