Redux: @connectを使用せずにアクションを呼び出す方法は？

それが「正しい」方法かどうかはわかりませんが、コンテキストを介してストアにアクセスできます。 次に、 Connectorコンポーネントを参照してください。
https://github.com/gaearon/react-redux/blob/master/src/components/createConnector.js

私はあなたをフォローしていません。 @connectを使用してストアにアクセスするのはまったく問題ありません。 @connectを使用せずにコンポーネントのアクションをバインド/呼び出す方法を探しています。

dispatch関数はストアのメソッドです。 コンポーネントで必要であるが@connectを使用したくない場合は、コンテキストを介してストアにアクセスし、そのディスパッチメソッドを使用できます。

class MyComponent extends Compoenent {
    static contextTypes = {
        store: React.PropTypes.object.isRequired,
    }

    render() {
         const { dispatch } = this.context.store
         const actions = bindActionCreators(headerActions, dispatch)
    }
}

親コンポーネントからディスパッチを渡すか、すでにディスパッチにバインドされているアクションを渡す必要があります。 それは私が信じている方法です、それは回避策ですが、コンテキストも機能します

これを説明してくれてありがとう！ わかった。

dispatch小道具として手動でそのコンポーネントに渡すことができます。

私もこの問題に少し戸惑っています。

私が正しく理解している場合は、コンポーネントの小道具を介してdispatch利用できるようにするか（そのコンポーネントからアクションをディスパッチできるようにするため）、アクション作成者にすでにdispatchにバインドされているものを提供する必要があります。親コンポーネント。 ただし、どちらのソリューションでも、小道具を介してディスパッチを利用できるように、 connect edの親コンポーネントが必要です。

したがって、最終的には、 dispatch依存関係を親コンポーネントに転送するだけです。 そして、そのようなconnect edの親がいない場合、どのようにそれを行いますか？

たとえば、コンポーネントの深い階層にいる場合はどうなりますか。

Provider
  Router
    AppContainer
     ...
       ...
         ...
           TheComponentThatNeedDispatch

そして、親の誰もがredux状態に接続する必要がない場合はどうなりますか？

connectを使用することの副作用としてディスパッチをコンポーネントで使用できるようにすると、親の1つをconnectすることが前提条件となるように思われます。アクションをdispatchすることができます。 コンポーネントがアクションをdispatchする能力と、redux状態から読み取るためにconnectを使用する必要性との間に相関関係があってはならないため、これは奇妙に感じます。

コンポーネントコンテキストから（ store.dispatchを介して） dispatchアクセスできることはわかっていますが、推奨される方法ではないため...

あなたはそれについてどう思いますか？

ありがとう！

コンポーネントがアクションをディスパッチする機能と、connectを使用してredux状態から読み取る必要性との間に相関関係があってはならないため、これは奇妙に感じます。

なんで変なの？ connectは、単に「Redux状態の一部に接続する」ではなく、「Reduxに接続する」と考えてください。 次に、それは理にかなっています。コンポーネント自体またはその親のいずれかをdispatchできるようにするにconnect()する必要があります。

現在のReactRedux APIでは、状態を選択せず​​にReduxに接続するのは便利ではありません。 connect(state => ({}))(MyComponent) （空のオブジェクトを返す）のようなものを書く必要があります。 これが、 dispatchを一級市民にする代替APIをdispatchだけ」を取得するためのAPIを追加することを計画している理由です。

これは意味がありますか？

接続は、単に「Redux状態の一部に接続する」ではなく、「Reduxに接続する」と考えてください。

今では完全に理にかなっています:)。

新しいAPIを使用するのが待ちきれません。

どうもありがとう、Reduxを使うのは至福です！

これはhttps://github.com/gaearon/react-redux/releases/tag/v0.5.0で入手でき

これは素晴らしく見えます！

@gaearonちょっとダン、ネストされたコンポーネントでbindActionCreatorsを使用する方法のヒントを教えてください。

「AddProduct」-reduxに接続されています（以下を参照）
__「ProductsList」
____ "ProductView"。

ProductViewをディスパッチできるようにしたいのですが、マスターの「製品の追加」にのみ次のものがあります。

function appState(state) {
    return {...};
}

export default connect(appState)(AddProduct)

ネストされたコンポーネントをconnect() dispatchすることも、小道具として

ダンに感謝します、本当にあなたの助けに感謝します。 本当にreduxも大好きです！

私がそうするかもしれないならば別の質問：
レデューサー自体の内部からサーバーAPIPOSTリクエストを配置できますか？
データベース（mongodb）にPOSTすると、アイテムは「_id」を取得します。これをredux状態にします。 POSTリクエストのコールバックとしてディスパッチを配置する必要がありますか？

ありがとうございました

レデューサー自体の内部からサーバーAPIPOSTリクエストを配置できますか？

絶対にそうではありませんが、レデューサーは副作用のない純粋関数でなければなりません。

データベース（mongodb）にPOSTすると、アイテムは「_id」を取得します。これをredux状態にします。 POSTリクエストのコールバックとしてディスパッチを配置する必要がありますか？

はい。

このガイドを参照してください： http ：

ダンに感謝します、うまくいきます（y）

サーバーレンダリングを使用している場合、現在のユーザーをログインさせるとしましょう。
ストアからの非同期フェッチをスキップして、サーバーで実行できますか？

サーバーレンダリングを使用している場合、たとえば現在のユーザーをログインさせる場合、ストアからの非同期フェッチをスキップして、サーバーで実行できますか？

サーバー上にストアを作成し、非同期アクションが終了するのを待ってからレンダリングすることができます。
http://rackt.github.io/redux/docs/recipes/ServerRendering.htmlも参照してください

私はおそらく重要な何かを見逃していますが、アプリの初期化中にすべてのアクションクリエーターに部分的にディスパッチを適用しないのはなぜですか？ そうすれば、ディスパッチへの参照を取得する方法を気にせずに、どこからでも電話をかけることができます。

@mpoisot ：アプリの起動時に、潜在的なアクションクリエーターをすべて知り、インポートし、バインドし、配布する必要があるためです。 とりわけ、それはコード分割のような状況では役に立ちません。

@markerikson createStore呼び出すことができるように、 appinitですべてのレデューサーを知っている必要があります。 次の行でbindAllActionCreators(store.dispatch)を呼び出すことを想像しています。

確かに、実際に使用するよりもわずかに多くのコードを取り込むことになります。 しかし、それが懸念事項である場合は、このようにしないでください。 または、レデューサーセット（リデューサー+アクションクリエーター+セレクター）をより小さく、より焦点を絞ったバンドルに分割します。 または、一部のアクションクリエーターのみをバインドします。

これを行うことで、パフォーマンスが大幅に低下することはありますか？ それとも、それはどういうわけか、地獄をコーディングするためのひどい道をたどりますか？

@mpoisot ：私が考えることができるパフォーマンスの問題は実際にはありません。 ただし、テスト性と再利用性は制限されます。

connectを適切に使用すると、依存性注入のアプローチが軽くなります。 「プレーン」コンポーネントは、小道具として何らかの関数が与えられていることを知っているだけであり、必要に応じてその関数を呼び出す必要があります。 親コンポーネントから直接渡されたコールバックなのか、事前にバインドされたアクションクリエーターなのかは、実際には関係ありません。 つまり、コンポーネントは簡単な方法で再利用でき、テストもはるかに簡単になります。 一方、ストアを直接インポートするようなことを行うと、コンポーネントがその特定のストアインスタンスと実装に結び付けられるため、推奨されません（Redux FAQ：http：//redux.js.org/docs/faq/による）。 StoreSetup.html＃store-setup-multiple-stores）。 あなたが正しく質問していることを理解していれば、それは基本的にストアを直接インポートして参照するのと同じ状況です。

良い点ですが、アクションクリエーターにディスパッチを部分的に適用することは、ストアをシングルトンとしてインポートすることと同じです。 私はその理由を学ぼうとしましたが、ダン・アブラモフがサーバーサイドレンダリング（ほとんどの人は決して使用しない）のためにシングルトンストアが嫌われていると言った場所をいくつか見つけましたが、奇妙なことに彼はテスト（誰もが行うべきか、少なくともしないことについて気分が悪い）。

確かに、テスト用にさまざまなストアでストアを更新できるストアシングルトンオブジェクトを作成できると思いますか？ ストア自体を直接エクスポートする代わりに、 StoreSingleton.getStore()を介してそれを返し、 StoreSingleton.setStore()介して現在のストアを変更します。 したがって、テストに関しては、ストアの単一のインスタンスに縛られることはありません。 ただし、これがスレッドサーバー環境で機能しない理由はわかります。

@mpoisotプロバイダー/コネクトの機能について説明しました。 ;）

多くの場合、ある日ディスパッチ（または事前にバインドされたアクション）が必要な「ダム」コンポーネントがあります。 だから私は彼を接続で包むか、接続されているコンポーネントを含むものから何かを渡すかもしれません。 グローバルにアクセス可能なディスパッチを回避するためだけに、多くの配線や小道具の通過のように感じることがよくあります。 mapStateToProps（）の場合、Provider / connect（）を使用するとパフォーマンスが大幅に向上します。 また、ダムコンポーネントを再利用する場合は、ディスパッチロジックを高次コンポーネントに抽出するのが理にかなっています。

しかし、私はこのシナリオを何度もヒットしたので、なぜだろうと思います。 そして、その答えは「いつかサーバーサイドレンダリングを実行できるようにするため」のようです。 （私が間違っている場合は私を訂正してください）。

現在、 connect()はProviderのストアからdispatchメソッドを提供するだけですが、将来的には変更される可能性があります。 たとえば、開発ツールとの統合などの追加機能を追加して、どのReactコンポーネントが実行中のアクションのソースであったかを通知する場合があります。 または、誰かが別の方法でストアを拡張するコンポーネントを作成する場合があります。これは、ストアをコンテキストに合わせて拡張し、その拡張ストアをコンポーネントツリーに渡すことによって行います。 アクションクリエーターをシングルトンストアにバインドした場合、間違ったdispatch呼び出す可能性があります。

はい、私が見た「コンポーネント/カプセル化された状態」の実験のいくつかは、まさにそのアプローチで機能します。 そのアイデアの気の利いた点は、ラッパーコンポーネントがまだthis.context.storeをdispatch 、必要に応じてその

私はこれの両側にいます-

私のプライマリアプリケーションでは、ストアをシングルトンとして扱い、グローバルに利用可能なgetStore()関数を使用します。 サーバー側のレンダリングは使用しません。 mapStateToProps引き続きProviderとconnectを使用します。

一方、コンポーネント階層内のさまざまな場所でストア（ @jimbollaや@markeriksonなど）をラップする実験的なアプリを作成しました。 dispatchとgetState両方でアプリ全体で変更します。つまり、アプリ全体で（ contextまたはpropsを介して）配線する必要があり、シングルトンにすることはできません。

達成したいことにもよりますが、シングルトンストアのものは実行可能だと思いますが、個人的にはゆっくりと離れていきます。

ええ。 あなたは確かにストアをアクセシブルなシングルトンとして扱うことができますが、それはあなたを制限し、慣用的なものとは見なされず、そうすることの本当の利点は見当たりません。

ありがとう、素晴らしいフィードバック。 誰かがストアラッピングを披露するリンクを投稿できますか？

@mpoisot

これは、 dispatchラッピングがどのように役立つかを示すDanのコメントの1つです。

https://github.com/reactjs/redux/issues/822#issuecomment -145271384

動機が何であるかをよりよく理解するために、スレッド全体を読む必要があるかもしれません。

特に、 dispatchがどのようにラップされているかに注意してください（強調表示しました）。

同様の混乱に直面しているため、この古い投稿をハイジャックして申し訳ありません。接続せずにアクションをディスパッチしたいと考えています。

export default class App extends Component {
...
  componentDidMount() {
    //registering event listener
    BackgroundGeolocation.on('location', this.onLocation, this.onError);
  }

  onLocation(location) {
   //wishing to dispatch an action to update variable in store
  }

  render() {
    return (
      <Provider store={store}>
        <AlertProvider>
          <MainNavigator screenProps={{ isConnected: this.state.isConnected }} />
        </AlertProvider>
      </Provider>
    );
  }
}

私が理解していることから、ストアを構成してProvider渡すだけなので、このコンポーネントのストアに接続できない可能性があります。 onLocationイベントでアクションをディスパッチするにはどうすればよいですか？

@isaaclem ：store.dispatch(someAction)直接呼び出すことができます。

もう1つのオプションは、コンポーネント構造を再構築して、一部のコンポーネントが<Provider>内部でバックグラウンドのジオロケーション動作を実行し、接続できるようにすることです。