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

Question

I've implemented Redux in my React application, and so far this is working great, but I have a little question.

I have an option in my navbar to change the locale , stored in redux's state . When I change it, I expect every component to rerender to change traductions. To do this, I have to specify

locale: state.locale

in the mapStateToProps function... Which leads to a lot of code duplication.

Is there a way to implicitly pass locale into the props of every component connect ed with react-redux ?

Thanks in advance!

Answer 1

Redux implements a shouldComponentUpdate that prevents a component from updating unless it's props are changed.

In your case you could ignore this check by passing pure=false to connect :

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

For performance reasons this is a good thing and probably isn't what you want.

Instead I would suggest writing a custom connect function that will ensure locale is always added to your component props:

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

To cut down the duplication of code I usually just pass an arrow function to the connect method when mapping state to props, looks cleaner to me. Unfortunately though, I don't think there is another way to make it implicit as your component could subscribe to multiple store "objects".

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

Answer 3

To solve this problem, you can set the Context of your parent component, and use it in your child components. This is what Redux uses to supply the store's state and dispatch function to connected React components.

In your Parent component, implement getChildContext and specify each variable's PropType .

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

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

}

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

In your Child component, use this.context.test and specify its PropType .

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

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

Here's a demo of it working.

I might as well mention that, while libraries like Redux use this, React's documentation states that this is an advanced and experimental feature, and may be changed/removed in future releases. I personally would not recommend this approach instead of simply passing the information you need in mapStateToProps , like you originally mentioned.