reduxストアでアプリケーションの状態を整理するにはどうすればよいですか？

Question

私は反応アプリケーションに3つの主要な部分を持っていると想像してください。その状態はすべてredux（ローカル状態なし）で管理されています。 Login、RegisterとView Profile：

私の理解では、初期状態がそうのように見えるだろうということです。

const initialState = { 
    login: {}, 
    register: {}, 
    profile: {}, 
    appUI: { 
    menuToggled: false 
    } 
}; 


export function mainReducer(state = initialState, action) { 
... 

はその後、私のコンテナコンポーネントに私が反応し、Reduxのconnect()を使用して状態の要部を引っ張るだろう：

function select(state) { 
    return { 
    state: state.login 
    }; 
} 

export default connect(select)(Login); 

ログインのプレゼンテーションコンポーネントでユーザーがユーザー名、パスワードなどを入力すると、グローバル状態が（アクションを使用して）更新され、ように：

{ 
    login: { 
    username: "foo", 
    password: "bar" 
    }, 
    register: {}, 
    profile: {}, 
    app: { 
    menuToggled: false 
    } 
}; 

これは有効なアプローチですか？有効な私は私のアプリケーションの状態を整理している方法を意味するので、成長している（クラッドと思う）より多くの "セクション"があれば、私はより多くのフィールドを還元するでしょう。私は反応して還元するのが新しく、どんな反パターンも避けたいと思っています。

Answer 1

これは間違いなくアンチパターンではありません。 mapStateToPropsの全目的（connectの最初のパラメータ）は、コンポーネントが必要とするアプリケーション状態の部分を抽出することです。

私の関心事は、コンテナコンポーネントがログイン資格情報などに依存していることです。また、どのようにあなたの減速機を構造化しているのか分かりませんが、reduxのcombineReducers関数を使用することをお勧めします。