react-routerとreduxのほか、react-routerのテキストチュートリアル。 ロシア語で

すべての良い一日。 少し遅れましたが、それでも3番目のミニ教科書が来ます。 今回はreact-routerを解析しました。 また、react-router + reduxの統合に関する2つの章があります。







rr + redux統合プロセスでは、 react-router-reduxおよびredux-routerを 使用しませんでした 。 本自体に示されているように、図書館の積極的な発展により、「魚を与える」だけでなく、「魚をどのように教えるか」を教えたいと思います。







また、上記の統合方法は、個人的な経験に加えて、SOへのredux開発者( 彼のtwitter )の回答と、さまざまなリポジトリの研究に基づいています。 彼は「唯一の真実」ではありません。 リポジトリへのリンクを提供するか、コメントでオプションを提案してください。







行こう!







book_screen







Reactルーター



ライブラリは広告を必要としません。 強力なネスト機能と、原則として、高レベルの優れた抽象化。







この資料は、公式チュートリアル( onetwo )といくつかのブログ( James K Nelsonのブログなど )に基づいています。







彼らはまた、Twitterでの「 非公式文書 」の執筆を「ツイート」しようとしましたが、これまでのところ、進歩は完全に収まりました。







React-Router + redux



多くの(私のように)公式のreduxドキュメントのこのセクションを待っています。 しかし、これが起こるまで、「リデュースの哲学」は、ネットワーク全体に散らばった情報の断片と救助に来ます。







「reduxの哲学」とはどういう意味ですか?







まず、ルーティングは「アクション」です。







第二に、既存のactionCreators (アクションを作成する関数)内でbrowserHistory.push



取得して使用することはできません。 なんで? それは副作用だからです。







ミドルウェア(レイヤー関数)を使用するというアイデアは救いになります。 たとえば、プリミティブオプションを使用します。







action.redirectが-> browserHistory.push(nextUrl) *の場合







この回答は、ミドルウェアがnext()を返さなければならないという合意に違反しています。







*すでにbrowserHistoryについて2回目の言及をしています。 これは、react-routerをプロジェクトに接続すると、これらのメソッド(プッシュ、置換など)がデフォルトで使用できるためです。







質問への答えを探して、私はredux-routerコードをより深く調べました。 次の目標を達成したかった:ネイティブreduxを使用してルーティングを呼び出すことができるようにする-store.dispatch







このようにして、「哲学」を維持します。 アプリケーションの「データフロー」のプロセス全体は、当社によって明確に制御されています。







チュートリアルでは、簡単なタスクが分析されます。







ユーザーがログインを入力した場合- /admin



リダイレクトします。ユーザーがログインせずに/admin



にログインしようとした場合-登録フォーム( /login



)に転送し/login









この問題をうまく解決するために、コードreact-redux-jwt-auth-exampleを使用しました 。 強力なコンポーネントラッピングテクニックの優れたデモ。







オペラredux +ルーティングのすべてのタスクは次のようになるので、この問題の解決策はルーティングに関連するアクションを呼び出すプロセスを理解するための鍵です。 。







logger_screen










habrazhitelへの質問:







統合プロセスreact-router + reduxについて説明するために、別の記事を作成する必要があると思いますか(実際、これはチュートリアルの「Connect reduxを接続する」セクションです。短いです)。 何のために? おそらく、そのような束で長い間働いてきた他の開発者は、記事でアプローチとコードをすぐに見るので、コメントするでしょう。







以下は調査です。










SOに関する興味深い質問:







あなたはすべてを店に保管する必要はありません







成功した非同期reduxアクションでの別のルートへの移行







反応ルーターのonEnterフックからreduxストアに接続する方法は?










一部の統計(2016年4月25日現在):







初心者向けのReact.js :ビュー数59,481、ビジター数8,245、PDF / epub / mobi形式のダウンロード数3,843。







ロシア語のReduxチュートリアル :66,978ビュー、7,942訪問者、2,832ダウンロード。







両方のコースについて-41 + 38「ディスカッション」。 これらは主に文法的な誤りです。 いくつかの賢明なコメントもあります( ハブ上 )。







皆様のご参加と関心をお寄せいただきありがとうございます。 まだ接続中: twitter 、mail-maxfarseer@gmail.com







PSカバー作者zirael_m@mail.ru(マリア、フリーランスプロフィール








All Articles