ReactReduxで一時的な状態を作成する方法は？

Question

私はReduxを1ヶ月間使っていましたが、プロジェクトが本当に大きくなった場合、すべてのReducerのすべての値にアプリ全体を公開する必要はありません。一時的な状態を作成するか、コンポーネントの個別の状態を作成する良い方法はありますか？

私はこれをすべて間違っていると思っていますか、それとも理由のためにこのように構成されていますか？ Redux docsによれば

Answer 1

私は「すべての還元剤の価値」とみなして、アプリ状態全体を指しています。

あなたは確かにあなたの状態をスライスし、必要な部分だけを特定のコンポーネントに公開することができます。これは、react-reduxバインディングからのconnectメソッドの目的です。 connectは関数（例：mapStateToProps）を受け取り、アプリ状態全体を取得し、プロキシとして指定した部分だけをreduxに「接続」しているコンポーネントに公開します。例えば

、あなたはシンプルで、ユーザーの名前とアドレスを示し、このようなコンポーネントリアクトがあるとします。

var myComponent = React.createClass({ 
    render: function() { 
    return (
     <div>{Name from redux state goes here}</div> 
     <div>{Address from redux state goes here}</div> 
    ); 
    } 
}); 

明らかにあなただけの作品、このコンポーネントにあなたの全体のアプリケーションの状態を送信する必要はありませんがユーザーの名前と住所を入力します。

// the "state" param is your entire app state object. 
function mapStateToProps(state) { 
    return { 
    name: state.name, 
    address: state.address 
    } 
} 

var connectedComponent = connect(mapStateToProps)(myComponent); 

が包まれmyComponentが今効果的に次のようになります：

var myComponent = React.createClass({ 
    propTypes: { 
    name: React.PropTypes.string // injected by connect 
    address: React.PropTypes.string // injected by connect 
    }, 

    render: function() { 
    return (
     <div>{this.props.name}</div> 
     <div>{this.props.address}</div> 
    ); 
    } 
}); 

Answer 2

：

アプリケーション全体の状態は 単一のストア内のオブジェクト・ツリーに格納されています。

1つの状態。 1つの店。それでおしまい。個々のコンポーネントには、より大きなアプリケーション状態によって通知されるローカル状態を作成できますが、その時点ではすでに存在するより大きな状態の一部をコピーするだけです。

複雑なアプリケーションでは、「スマート」コンポーネント全体を状態にすることはできません。あなたが100の減速機能を持っていても、connect a component to the storeの場合は、mapStateToPropsを使って、必要なアプリケーション状態の部分だけを選んでそれらのコンポーネントの小道具を作ることができます。だから、たとえあなたの心の裏に彼らが存在することを知っていても、あなたが使用していない国の部分すべてを見ることは決してありません。

これは本当に素晴らしいアーキテクチャパターンです。ある州ではsingle source of truthがあります。このため、アプリのどの部分でも古いデータがあることは不可能です。アプリケーションの状態を初期化し、すべてデータをロードしていないときは、の構造体のみを定義することに注意してください。したがって、開始時に構造全体を初期化することで、パフォーマンスが低下することはありません。また、アプリケーションの状態全体を単一のコンポーネントにロードすることは決してありません（必要がない限り）ので、あなたの小道具は常に管理しやすくなります。