React + Reduxで静的定数を読み込む

Question

私はReact-Reduxアプリケーションにサーバーサイドレンダリングを使用しています。そして私は、対応するIDを持つ都市の例のリストについては、いくつかの定数をロードするために、アプリケーションの起動時にしたい：

[ 
    { 
     name: "London", 
     id: 1 
    } 
    ... 
] 

私はそれがサーバ側でstoreに、このデータを入れて、ここで提案したようwindow.__INITIAL_STATE__を使用して、それをクライアントに提供するために、より良いことだと思いますhttp://redux.js.org/docs/recipes/ServerRendering.html

この定数は読み取り専用であり、データの正規化のためにプリロードします。たとえば、後で都市名を持つユーザーではなく、都市IDを持つユーザーのリストを取得することができます。{name: "Alex", cities: [1,2]}

問題を解決するには、このエラーが発生しました：

Unexpected key "cities" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "colors". Unexpected keys will be ignored.

この状況を処理するには、いくつかのエレガントな方法を探しています。

今の

私はそれをどのように扱うか2つのアイデアを持っている：

// server.js 
window.INITIAL_ACTIONS = [ 
    { type: "REQUEST_LOGIN_SUCCESS", user: {userId, userName, userEmail, etc} }, 
    { type: "REQUEST_CITIES_SUCCESS", [..listOfCities] }, 
] 

：

1. は、常にデフォルトの状態を返します空の減速

   export const cities = (state = [], action={ type: null }) => { 
       return state 
   } 
   

2. Send from server initial actions with payloads, and execute them on client at startupを作成します。

   私client-index.jsで、右のストアを作成した後、それらのアクションをディスパッチ：

   //client-index.js 
   window.INITIAL_ACTIONS.forEach(store.dispatch) 
   

   をだから、私のアプローチの一つは良いですか？または、他のより洗練されたソリューションを知っているかもしれませんか？

   ありがとうございました。

Answer 1

ダミーの「設定」レデューサーと同様のことを行います。すなわち

const rootReducer = combineReducers({ 
    ... 
    settings: (state = {}) => state, 
    ... 
}); 

これは、すべてのアプリケーション設定を保存するのに便利な場所です。

同じ方法で初期状態をキーしてください。すなわち

window.__INITIAL_STATE__ = { 
    ... 
    settings: { ... }, 
    ... 
}; 

いくつかはこのプラクティスに反対する可能性がありますが、私はそれが正しいと思います。 settingsは一定であっても、それにもかかわらず状態です。それは単一の状態オブジェクトのreduxの習慣に従う。 （さらに、設定状態スライスが動的になり、「本当の」減速器を必要とする将来のポイントが来るかもしれません。）