2017-01-28 46 views
2

私はReduxをReactアプリケーションに取り込み始めていますが、正確に私の「マスター状態の設計」がどこで使われているのか理解できません。React/Redux:「マスター」アプリケーションの状態をどこに作成するのですか?

コンテキストのために、私はアプリの状態を巨大なツリーと考えています。私はツリーの小さな部分を処理する減速材を持っています。私は状態ツリーをどのように表現するかについて少し考えましたが、変数initialStateがあります。これは基本的に、私のアプリケーション状態のさまざまな部分を含む子オブジェクトの束を持つImmutable.jsオブジェクトです。

私は自分のアプリのこれらのさまざまな部分にマップするために私のレデューサーを分割しましたが、巨大なマスターステートツリーの作成方法を理解できません。私は、各減量主体が状態ツリー+行動全体を取り込み、その行動に基づいて新しい状態を返すことを知っていますが、減速機に入る状態がundefinedである場合、「初期状態」をどこに置くべきか分かりません。

言い換えれば、最初に定義されていない状態ツリー全体の作成を担当する単一のレデューサーです(もしそうなら、そのレデューサーはどこに住んでいますか)。あるいは、いずれかの減算器が未定義状態の引数をinitialState変数に代入する必要がありますか?

答えて

3

combineReducersを使用している場合は、「ルート」を作成する必要はありません。 combineReducersによって返される関数は、それ自体が減速器であり、渡された各減速器の "分岐"(プロパティ)を持つ状態ツリーのルートを自動的に作成します。減速器は、初期状態。

combineReducersを使用していない場合は、各レデューサーは、それが動作する状態ツリーの部分のみを心配する必要があると思います。それを単一の「マスター」レデューサーに移動すると、不必要に関連するコードが分割され、アプリを推論するのが難しくなります。

+0

Ha!本当に!私は最初にドキュメントを読んでそれを選んだことはありませんでした。ありがとう! –

0

official guideの例に示すように、初期状態になる減速機の最初の引数にデフォルト値を使用できます。

function todoApp(state = initialState, action) { 
    switch (action.type) { 
    case SET_VISIBILITY_FILTER: 
     return Object.assign({}, state, { 
     visibilityFilter: action.filter 
     }) 
    case ADD_TODO: 
     return Object.assign({}, state, { 
     todos: [ 
      ...state.todos, 
      { 
      text: action.text, 
      completed: false 
      } 
     ] 
     })  
    default: 
     return state 
    } 
} 

この初期状態は、クライアントコードにハードコードされたデフォルト値にすることができます。または、サーバーによってHTMLページにブートストラップされたデータもあります。たとえば、サーバーでレンダリングされたEJSテンプレートでは、次のように指定できます。

<script> 
window.INITIAL_STATE = <%= JSON.stringify(initialState) %> 
</script> 
+0

ああ、そうです。私は状態が未定義である場合にはパラメータとして配置できることを理解していますが、私は 'initialState'を毎回巨大なツリーにしなければならないという問題があります。 docsのtodoの例のような小さなアプリケーションを持っているのはいいですが、私が新しいものを定義したいときは、私の州のすべての*をすべての減速家に渡したくありません。 –

+0

分岐の減速器のinitialStateは、その分岐のみの初期状態であり、状態ツリー全体ではありません。 – lorefnon

関連する問題