Question

我已经在我的Redux应用程序中实现了React，到目前为止这项工作很有用，但我有一点问题。

我的导航栏中有一个选项可以更改存储在locale中的redux's state。当我改变它时，我希望每个组件都能重新发布以改变转换。为此，我必须指定

locale: state.locale

mapStateToProps函数中的

...导致大量代码重复。

有没有办法隐藏地将区域设置传递到connect编辑的react-redux每个组件的道具？

提前致谢！

Answer 1

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 }

Answer 2

为了减少代码的重复，我通常只是在将状态映射到props时将箭头函数传递给connect方法，对我来说看起来更干净。不幸的是，我不认为还有另一种方法可以隐藏它，因为你的组件可以订阅多个商店＆＃34;对象＆＃34;。

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

Answer 3

要解决此问题，您可以设置父组件的Context，并在子组件中使用它。这就是Redux用来向连接的React组件提供商店state和dispatch功能的方法。

在您的父组件中，实施getChildContext并指定每个变量＆＃39; 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。

我不妨提一下，虽然像Redux这样的库使用它，但React的文档指出这是一个高级的实验性功能，可能会在以后的版本中更改/删除。我个人不会推荐这种方法，而不是简单地在mapStateToProps中传递您需要的信息，就像您最初提到的那样。

在redux状态的语言环境更新后重新呈现React组件

3 个答案: