2016-04-15 63 views
2

Reduxのストアサービスは、React Appのさまざまなコンポーネントによって最終的に利用されています。それによって公開されるメソッド(dispatch、getState、subscribeなど)は、すべての種類のコンポーネント(コンテナまたはプレゼンテーションなど)で使用されます。ReactでRedux - コンポーネントとストアを共有する正しい方法

このストアサービスを回避するアプローチは、重要な設計上の決定だと思います。 2つの方法があります:

1)すべてのネストされたレベルのすべてのコンポーネントにストアを渡します。これは推奨されたものではありません。

2)react-reduxのようなツールを使用して、コンテキストの助けを借りて、必要な場所であればいつでもストア(状態とディスパッチが正確になります)を利用できます。

私の質問は次のとおりです。必要な場所に店舗をインポートするだけではいかがですか。 SPAベースのReact Appの場合、ストアはシングルトンになります。任意のレベルでネストされたコンポーネントは、単にストアをインポートできます。上記の2つのアプローチのいずれかを採用するのはなぜですか?ネストされたレベルのコンポーネントの

:私たちは、あなたがの異なる部分からのデータを管理する第2 MyComponentのを、持っているときに何が起こるかを考えてみましょう。この

import store from "path/to/store"; 

let MyComponent =() => { 
    let state = store.getState(); 

    return (
     <div onClick={() => { 
      store.dispatch({ 
       type: "SOME_EVENT", 
       payload: store.somedata 
      }); 
     }}>{state.dataINeedHere}</div> 
    ); 
}; 

export default MyComponent; 

代わり

import { connect } from "react-redux"; 

let MyComponent = ({somedata, onMyAction}) => { 
    let state = store.getState(); 

    return (
     <div onClick={() => { 
      onMyAction(somedata); 
     }}>{somedata}</div> 
    ); 
}; 

const mapStateToProps = (state) => { 
    return { 
    somedata: state.somedata 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onMyAction: (input) => { 
     dispatch({ 
      type: "SOME_EVENT", 
      payload: input 
     }); 
    } 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent); 
+0

「あなたはこれを行うことができますか」の例では、状態の変化によってコンポーネントが再レンダリングされる原因は何ですか? – azium

+0

トップレベルの状態変更を購読して再レンダリングを起動します – Vijey

+0

mobx/mobx-reactを調べましたか?あなたが描いているもののように聞こえます。 – azium

答えて

5

Reduxのよくある質問はhttp://redux.js.org/docs/FAQ.html#store-setup-multiple-storesにあります。

要約:ですが、店舗を直接インポートすると、コードをそのストアの実装に結び付けているため、再利用性が低く、テストが難しくなります。理想的には、あなた自身のコードのどれも、実際に店を直接参照することはありません。接続されたコンポーネント、ミドルウェア、サンクされたアクションクリエータはすべて、依存関係注入によって適切なdispatchgetState関数参照を受け取り、再利用可能にし、テストの動作を簡単に疑似できるようにします。

0

の操作を行うことができます店舗。あなたのオプションは、そのデータを更新/アクセスするために、正確にどのようにそれぞれを伝えるために、次のとおりです。

<Container> 
    <MyComponent path="https://stackoverflow.com/a/b/c" /> 
    <MyComponent path="https://stackoverflow.com/a/b/d" /> 
</Container> 

またはあなたはそれが必要なものだけに、各アクセス権を与えることができます:

<Container> 
    <!-- context /a/b was passed to Container --> 
    <MyComponent data={c} onUpdate={update(c)} /> 
    <MyComponent data={d} onUpdate={update(d)} /> 
</Container> 

後者はMyComponentのがはるかに簡単かつ非常になりますより柔軟な

関連する問題