還元のメリット

Question

私はReduxまたはFluxなしのReactを学び始めており、Reduxについて多くのことを聞いてきましたし、今後の状態を管理するのに好都合なパターンと思われます。私が理解していることは、Appの全状態が、Reactツリーの最上部にあると思っている店舗に住んでいることです。様々な子コンポーネントは、それに関連するさまざまな状態に「サブスクライブ」します。

これはReactのコア構造がすでにこのように設定されていると思っているので、やや混乱しますか？つまり、コンポーネントが特定の状態を持っている場合、それを子コンポーネントに渡して、Reactツリーをさらに下げるとthis.state.exampleまたはthis.props.exampleをコンポーネントに追加する必要があります。このアプローチで私には、同様にコンポーネントを「購読」しています。

これがこのような質問のための適切な場所ではない場合に謝罪しますが、誰かが私がここで欠落しているか、非常に役立つReduxの利点を追加しました！

Answer 1

サブスクリプションの部分では正しい軌道に乗っていますが、Reduxはすばらしく、他のFluxのような状態管理パターンと同様に、子コンポーネントを更新できるように、子チェーンのプロパティを渡す必要はありません以下のようなので、（あなたがしたかったが、できなかった場合に必要）：

function Parent() { 
    return <ChildOne color="red" /> 
} 

function ChildOne(props) { 
    return <ChildTwo color={props.color} /> 
} 

function ChildTwo(props) { 
    return <h1>The Color was: {props.color}</h1> 
} 

それはかもしれないコンポーネントオブジェクト方にプロパティを更新する"dispatch"（Reduxの/フラックス用語）状態ストアにactionにあなたを可能にに加入する。

「接続」のライブラリはreact-reduxです。それは多くの機能を持っていますが、私が見ている主なのは、あなたが購読したいと思っているreduxストアの部分を含むより多くのロジックでコンポーネントを "ラップする"高次コンポーネント（HOC）であるconnectです。

ので、上記のようになります。

最大の違いは、それが内 childTwo対象に「サブスクライブ」だったので、あなたは ChildTwoに Parent 2ダウンのレベルから色を渡すために持っていなかったということです

export class Parent extends React.Component { 
    componentDidMount() { 
    this.props.dispatch(changeColor('red')); 
    } 
    render() { 
    return <ChildOne /> 
    } 
} 
export default connect((state) => ({ //This property is the redux store 
    parent: state.parent, 
}))(Parent) //higher order component that wraps the component with redux functionality 

function ChildOne(){ 
    return (
    <ChildTwo /> 
); 
} 

export function ChildTwo(props) { //will have childTwo bound in props object 
    return (
    <h1>The Color is: {props.childTwo.color} 
); 
} 
export default connect((state) => ({ //This property is the redux store 
    childTwo: state.childTwo, 
})) 

reduxストアとそのビットの状態をコンポーネントに接続したので、ストアの変更によってコンポーネントが状態変更から再レンダリングされます。あなたが唯一の深い1つの層を下っていると、コンテナコンポーネントは、AJAXのようなロジックを処理しているような特性の通過は理にかなって

プロパティの通過とReduxのは、このPresentationのmedium postとContainerコンポーネントとより多くの意味を行います使用して、リクエスト、またはディーラーの一部への発送など。