ログイン後に還元剤を水和するには？

Question

基本設定：

1）アプリケーションは、Appは、HTML、画像、当然のアプリ自体のような静的なファイルを提供nginxのが直面しているフロントによって提供されて反応し、Reduxの、

2）です。また、関連するすべてのリクエスト（Webソケットおよび/またはAJAX）をバックエンド（phoenix/elixir）に転送します。

3）ユーザーは認証が必要です。私はクライアント側だけであり、うまく動作するredux-oidcライブラリを使用しています。

4）ユーザーがログオンした後は、次に何をするかにぼんやりしているときです。

質問（複数可）：

1）私は、私はこのように、使用者が誰であるか知っているとしていないため、最初の要求とと​​もに状態を送信することはできません送信するためにどの状態か分かりません。一方、アプリケーションは既にブートされています（空のストアが作成され、ログインコンポーネントが表示されます）。

2）ユーザーログオン後、ユーザー固有のナビゲーションバー、タイムライン、メールボックスなどの何も表示できません。反応して仕事をする。私はどのようなアプローチを取るべきですか？

3）サーバーをレンダリングする理由は、a）ノードを使用せず、選択したフレームワークを使用して反応コンポーネントをレンダリングするのが面倒で複雑であり、b）単にNGinxにエクスポートできない静的資産を提供し、そこで実行されるサーバーロジックはありません。理論的には、NGinxを取り除き、APIサーバー上でサーバーベースのログインを行い、HTMLをJSON状態とともに送信して、クライアント上でアプリケーションをレンダリングすることができます。しかし、NGinxは静的資産を提供するだけでなく、ロードバランシングのインスタンスもほとんどないので、それを取り除くことは、私がやりたいことではありません。

アドバイスをいただければ幸いです。

Answer 1

ストアが作成された後の状態をハイドレーションするには、トップレベルのレデューサーをバイパスして状態全体を置き換えることができるメインレデューサーを作成します。

リューカは、現在の状態を取得し、アクションのペイロードと結合して新しい状態を返す関数です。通常、メイン減速機は、combineReducersを使用するすべての上部減速機の組み合わせであり、状態は、最上位の減速機によって戻される状態部品の組み合わせである。

ただし、メインレデューサーはアクションに直接反応できます。メインのレデューサーが特定のアクション（hydrate）を受け取った場合、結合されたレデューサーを呼び出す代わりに、アクションのペイロード（保存された状態）を返します。組み合わせられた減速機には他の動作が渡されます。

const mainReducer = (state = {}, action) => 
    action.type === 'hydrate' ? 
     action.payload // hydrate the state 
     : 
     reducers(state, action); // create new state by using combined reducers 

---

の作業例：

const { combineReducers, createStore } = Redux; 
 

 
const people = (state = [], action) => action.type === 'people' ? [...state, action.payload] : state; 
 

 
const items = (state = [], action) => action.type === 'items' ? [...state, action.payload] : state; 
 

 
const reducers = combineReducers({ 
 
    people, 
 
    items 
 
}); 
 

 
const mainReducer = (state = {}, action) => action.type === 'hydrate' ? action.payload : reducers(state, action); 
 

 
const store = createStore(mainReducer); 
 

 
store.subscribe(() => console.log(store.getState())); 
 

 
store.dispatch({ type: 'people', payload: 5 }); 
 
store.dispatch({ type: 'items', payload: 'green' }); 
 
store.dispatch({ type: 'hydrate', payload: { 
 
    people: [20, 30, 50, 100], 
 
    items: ['green', 'yellow', 'red'] 
 
}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>