.getState（）メソッドをコンポーネントに渡すことはできますか？

Question

私は自分のコンテナに小道具としてディスパッチすることができます。状態オブジェクトのコピーをコンテナに渡すこともできます。しかし、私がしたいのは、このメソッドを "getState（）"をthis.props.getStateとしてコンテナに渡すことです。

これを行う方法はありますか？

---

私はこれをしたい理由：

自分のアプリケーションの構造は、私が実際にコンテナ内である必要はありません任意のロジックを保つために試してみた、簡素化するために、かなり大きいです別のファイル（ "ユーティリティ"フォルダ）に保存します。たとえば、カスタムバックエンドがあるため、バックエンドから送受信するすべてのコードは../utilities/api.jsにあります

これらのユーティリティがストアにアクセスできるようにするには、 ../store/createStore.jsから直接ストアをインポートしています。これはうまくいきますが、私が代わりにやりたいのは、依存関係注入を使用して、APIを呼び出すコンポーネントからディスパッチとgetStateを渡すことです。そのため、これらのアプリケーションの単体テストを書く方が簡単になります。私たちが将来開発する可能性がある他のReduxアプリケーションとのモジュール性。

基本的に、私が書きたいのですが、このようなものです：

//(Pesudocode) 
// ../containers/SomeComponent.js 
import api from '../utilities/api' 

class SomeComponent extends Component { 
    constructor(props){ 
    super(props); 
    this.api = api(this.props.dispatch, this.props.getState); 
} 

someMethod(){ 
    this.api.foo('bar'); 
} 
// etc. 

// pseudocode 
// in ../utilities/api.js 
export default function(dispatch, getState){ 
    return { 
    foo: function (bar){ 
     // dispatch a complicated action which changes the state considerably 
     dispatch(action.someAction(bar)) 
     // get the new state. 
     console.log("New State", getState()); 
    } 
    baz: function (razz, dugi){ 
     // do something else 
    } 
    } 

それはクラスがたとき現在の状態のコピーで送信するために、私が見つけた、可能ですを構築しましたが、私は実際に関数 getState（）を呼び出す必要があります。なぜならそれらの関数のいくつかは非同期であるからです。

非同期アクションの使用など、他のパターンが存在する可能性がありますが、これはうまく機能しているためです。

Answer 1

これは、Reactのcontextを使って解決することができます。これは、基本的に依存性注入メカニズムであり、任意のレベルの下位レベルの値をコンポーネントツリーに送ることができます。

あなたが再来または同様の状態のコンテナ使用している場合は、その実装は次のようになります。何をしようとする

const store; 
 

 
class App extends Component { 
 

 
    static childContextTypes: { 
 
     getState: React.PropTypes.func.isRequired 
 
    } 
 
    
 
    getChildContext() { 
 
     return { 
 
      getState:() => store.getState() 
 
     } 
 
    } 
 

 
    render() { 
 
     return <ChildComponent/> 
 
    } 
 
} 
 

 
class ChildComponent extends Component { 
 

 
    constructor(props, context) { 
 
     super(props, context); 
 
     this.api = api(props, context.getState); 
 
    } 
 
    
 
    static contextTypes: { 
 
     getState: React.PropTypes.func.isRequired 
 
    } 
 
}

Answer 2

は、接続コンポーネントを再作成です。 connect()コールのmapStateToProps引数が実行していることは、選択した状態を店舗から引き出し、それを小道具として取り付けることです。私はそれをお勧めしませんが、議論として州全体を渡すことができます。

あなたが何をしようとしているのかを見てみましょう。あなたはredux-thunkライブラリを使用し、apiの周りにラッパーアクションクリエイターを作成してください。

const apiAction = (url, onComplete) => { 
    return (dispatch, getState) => 
     const state = getState(); 
     ...some logic 

     api(foo, bar, onComplete) 
} 

あなたはReduxのアクションクリエイターとあなたのAPI呼び出しをラップする必要があるときは、現在お使いのAPIコールでReduxのアクションクリエイターをラップしています。