サーバーとクライアントの両方でReduxストアを処理する方法。

Reactでのサーバー側レンダリングに関するシリーズの第3部へようこそ。前回、サーバーとクライアントの両方でレンダリングされるようにプロジェクトを構成する方法について説明しました。今日は、前の例にReduxを追加してみます。

Reduxの基本をご存知だと思いますので、説明に時間をかけません。FluxアーキテクチャとRedux自体の概念に慣れていない場合は、公式ドキュメントを確認してください。

パッケージのインストール

まず最初に—サーバーとクライアントの両方でReduxを使用するようにアプリケーションを構成する前に、2つのパッケージをインストールする必要があります。

reduxパッケージには、ちょうどReduxのライブラリが含まれています。react-redux依存性はReduxのを接続する私たちを助け、コンポーネントを反応します。

レデューサー+アプリコンポーネントの変更

必要なパッケージがすべてインストールされたので、プロジェクトへのReduxの追加に進むことができます。レデューサーの追加から始めましょう—それを行うために、reducersフォルダーをsrcディレクトリーに追加し、index.jsファイルをその中に配置しました。このファイルの内容を見てください：

上記のレデューサーは、CHANGE_TEXTという1つのアクションタイプのみを処理します。initialText状態プロパティの値を変更します。次に行うことはApp.js、ボタンのクリックでアクションをディスパッチするようにコンポーネントコードを修正することです。これが私たちがそれを行う方法です：

ご覧のとおり、コンポーネントの内部状態は完全に削除されています。これからは、Reduxストアで状態をグローバルに保持するためです。パッケージconnectからインポートされた関数のおかげで、react-redux状態プロパティ（mapStateToPropsメソッド）とアクションをディスパッチするメソッド（mapDispatchToProps関数）をコンポーネントのpropsオブジェクトに挿入することができます。

サーバー側の構成

次に、ソリューションのサーバー部分にいくつかの変更を加えます。以下の変更されたserver.jsファイルを参照してください。

では、ここで何が変わったかを分析しましょう。まず、インポートのセクションをご覧ください。パッケージcreateStoreからメソッドをインポートしreduxます。ライブラリのProvideコンポーネントreact-reduxとreducers、数分前に追加したばかりのコンポーネント。

それでは、それらの使用方法をご覧ください。呼び出すことによってcreateStoreで機能をreducersし、initialStateそのパラメータとして渡された、我々はで初期化Reduxのストアの作成initialStateオブジェクトを。次に注意することは、AppコンポーネントをコンポーネントでラップすることProviderです。また、作成済みのReduxストアをその属性によってこのコンポーネントに渡します。そのおかげconnectで、App.jsファイルで使用した関数はストアにアクセスできます。

またinitialState、Htmlコンポーネントの属性としてオブジェクトを渡していることにも注意してください。すぐにわかるように、クライアント側ではまだ必要です。

クライアント側の構成

ご想像のとおり、最後に行うことは、クライアント側のコードを修正することです。以下のclient.jsファイルを参照してください。

ここでは、server.jsファイルで行ったのと同じ3つのものをインポートしました。次に、reducers最初のパラメーターとして渡すストアも作成します。ここでの唯一の違いはcreateStore、初期状態として関数に渡すものです。これは、オブジェクトに格納されている値から作成されたAPP_STATEオブジェクトです。そのため、同じメカニズムを使用して、サーバーとクライアントの間で初期状態を共有しました。

もちろん、ここで最後に行ったことはProvider、Appコンポーネントをラップするコンポーネントの属性として、作成済みのストアオブジェクトを渡すことです。このようにしてconnect、クライアント側のReactコンポーネントで使用されるすべてのメソッドもストアにアクセスできるようになります。

概要

それが今日のすべてです。サーバーサイドでレンダリングされたReactアプリケーションにReduxを追加するのは非常に簡単だと思います。サーバー上に最初にストアを作成し、後でクライアントスクリプトがロードされたときにストアを作成する必要があります。また、初期状態を共有する必要がありますが、Reduxを使用せずに、前の例と同じメカニズムを使用してそれを実現できます。

今日説明した例は、私のGitHubリポジトリにあります。クローンを作成して、自分で試してみることをお勧めします。

Reactでのサーバー側のレンダリングについてはよく知っていると思いますが、これでシリーズは終わりではありません。次の記事では、react-routerを例に追加する方法を紹介します。

PSこの投稿は、Reactを使用したサーバーサイドレンダリングに関する一連の記事の一部です。以下のシリーズのすべてのアイテムのリストを参照してください。

• Reactでのサーバーサイドレンダリング—はじめに
• Reactでのサーバーサイドレンダリング— Express.js
• Reactでのサーバーサイドレンダリング— Redux
• Reactでのサーバー側レンダリング— react-router
• Reactでのサーバーサイドレンダリング—実際のデータの処理