3

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

localeに保存されている を変更するオプションがナビゲーションバーにありますredux's state。変更すると、すべてのコンポーネントが再レンダリングされて翻訳が変更されることを期待しています。これを行うには、指定する必要があります

locale: state.locale

関数内mapStateToProps...これは多くのコードの重複につながります。

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

前もって感謝します！

4

3 に答える 3

7

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

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

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 }
于 2016-06-27T23:17:01.243 に答える
0

コードの重複を減らすために、私は通常、状態を小道具にマッピングするときに接続メソッドにアロー関数を渡すだけで、すっきりと見えます。残念ながら、コンポーネントが複数のストア「オブジェクト」をサブスクライブできるため、暗黙的にする別の方法はないと思います。

export default connect((state) => ({
  local: state.locale
}))(component);
于 2016-06-27T16:05:49.973 に答える
0

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

親コンポーネントで、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
};

これが動作するデモです。

Redux のようなライブラリはこれを使用していますが、React のドキュメントには、これは高度で実験的な機能であり、将来のリリースで変更または削除される可能性があると記載されています。mapStateToProps最初に述べたように、必要な情報を単に渡すのではなく、このアプローチを個人的にはお勧めしません。

于 2016-06-27T19:21:23.933 に答える