還元状態のロケールが更新された後の反応コンポーネント

Question

私はReactアプリケーションにReduxを実装しましたが、これまでのところこれはうまくいっていますが、少し質問があります。

redux's stateに保存されているlocaleを変更するには、ナビゲーションバーにオプションがあります。私がそれを変更するとき、私はすべての構成要素が取引を変えるように改めて期待しています。これを行うには、私は、コードの重複の多くにつながるmapStateToProps機能...で

locale: state.locale

を指定する必要があります。

暗黙的にすべてのコンポーネントの小道具にロケールを渡す方法はありますかconnectreact-reduxで編集しましたか？

ありがとうございます！

Answer 1

Reduxは、コンポーネントが変更されない限り、コンポーネントが変更されないように、shouldComponentUpdateを実装しています。

あなたが connectに pure=falseを渡すことで、このチェックを無視することができ、あなたの場合は

：

connect(select, undefined, undefined, { pure: false })(NavBar); 

パフォーマンス上の理由から、これは良いことだと、おそらくあなたが望むものではありません。

代わりに、私はlocaleは常にあなたのコンポーネント小道具に追加されていることを確認するカスタム接続機能の書き込みを示唆している：

const localeConnect = (select, ...connectArgs) => { 
    return connect((state, ownProps) => { 
    return { 
     ...select(state, ownProps), 
     locale: state.locale 
    }; 
    }, ...connectArgs); 
}; 

// Simply use `localeConnect` where you would normally use `connect` 
const select = (state) => ({ someState: state.someState }); 

localeConnect(select)(NavBar); // props = { someState, locale } 

Answer 2

コードの複製を減らすために、私は通常、状態をpropsにマッピングするときに矢印関数をconnectメソッドに渡すだけで、よりきれいに見えます。残念なことに、私は、あなたのコンポーネントが複数のストア "オブジェクト"を購読できるように、それを暗黙的にする別の方法はないと思います。

export default connect((state) => ({ 
    local: state.locale 
}))(component); 

Answer 3

この問題を解決するために、あなたはあなたの親コンポーネントのContextを設定し、自分の子コンポーネントでそれを使用することができます。これは、接続されたReactコンポーネントに店舗のstateとdispatch機能を提供するためにReduxが使用するものです。

親コンポーネントでは、getChildContextを実装し、各変数のPropTypeを指定します。あなたの子コンポーネントで

class Parent extends React.Component { 
    getChildContext() { 
     return { 
      test: 'foo' 
     }; 
    } 

    render() { 
     return (
      <div> 
       <Child /> 
       <Child /> 
      </div> 
     ); 
    } 

} 

Parent.childContextTypes = { 
    test: React.PropTypes.string 
}; 

、this.context.testを使用し、そのPropTypeを指定します。

class Child extends React.Component { 
    render() { 
     return (
      <div> 
       <span>Child - Context: {this.context.test}</span> 
      </div> 
     ); 
    } 
} 

Child.contextTypes = { 
    test: React.PropTypes.string 
}; 

ここではdemoです。

Reuxのようなライブラリでこれを使用していますが、Reactのマニュアルにはこれは高度で実験的な機能であり、将来のリリースでは変更/削除される可能性があることに言及しておきます。私は個人的には、あなたが最初に言及したように、あなたが必要とする情報を単にmapStateToPropsに渡すのではなく、このアプローチを推奨しません。