当上下文更改时，使用上下文的子组件是否应该自动更新？

Question

I am trying to create a localization solution.

I am having the following structure for test purposes

index.js

import { Provider } from 'react-redux';
import store from './store';  //This is a redux store
import LocalizedComponent from './components/containers/HomeContainer';

function App() {
  return (
    <Provider store={store}>
      <LocalizedComponent />
    </Provider>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

The HomeContainer component is a HOC that wraps a simple presentational component into a localization component.

localization.jsx

import React, { PropTypes } from 'react';
import STRINGS from 'strings'; //This is an object containing translations


const translate = mapper => (Component) => {
  function LocalizedComponent(props, { store }) {
    const language = store.getState().language;
    const translatedProps = mapper(STRINGS, language);
    return (
      <Component {...props} {...translatedProps} />
    );
  }
  LocalizedComponent.contextTypes = {
    store: React.PropTypes.object
  };

  return LocalizedComponent;
};

export default translate;

mapper is a function such as this

const mapTranslationToProps = (strings, language) => ({
  <property key>: strings.<some key>[language]
});

and a Component could be something like this

Home.jsx

import React from 'react';

function SomeComponent(props) {
  return (
    <div>
      <p>{props.<property key>}</p>
    </div>
  );
}
SomeComponent.propTypes = {
  <property key>: React.PropTypes.string
};
SomeComponent.defaultProps = {
  <property key>: ''
};

export default SomeComponent;

in order to bring all these together we do this

HomeContainer.jsx

import Home from 'components/presentational/Home';
import translate from 'components/HOC/Localization';

const mapTranslationToProps = (strings, language) => ({
  <property key>: strings.<some key>[language]
});

LocalizedComponent = translate(mapTranslationToProps)(SomeComponent);

export default LocalizedComponent;

The first time this gets rendered, the correct language is picked from the state, via context and the text is displayed accordingly

However when I dispatch an action that changes the language in the state, the component does not get updated.

I was under the impression that changes to context would trigger a re-rendering, where applicable, but it seems that this isn't so.

I tried implementing the LocalizedComponent inside localization.jsx as a class, with lifecycle methods, but I noticed that shouldComponentUpdate does not even fire when the state changes.

I want LocalizedComponent s to update automatically when the selected language changes. Apparently I must be doing something wrong.

Can someone help me understand what?

Answer 1

If you use React-Redux you should use connect method to connect your components to redux store.
Updating context values doesn't trigger components re-render - React components are not notified when anything in context has changed. React component is re-rendered only if its state has changed, its parent has been re-rendered or forceUpdate has been called. Context in your case just points to an object that acts as redux store and React components are not aware of changes in this object. Besides, you should never update context. According to react docs :

Don't do it.

React has an API to update context, but it is fundamentally broken and you should not use it.

Furthermore, in React-Redux context store property always points to the same store object - when state is updated only some internal store object properties are changed but context still holds the same object reference so actually context value doesn't change.

There are two solutions to make sure your components are notified and updated when redux state has changed after dispatching an action.

If you use React-Redux you should use React-Redux connect . According to docs connect returns:

A higher-order React component class that passes state and action creators into your component derived from the supplied arguments.

Components connected to store will be automatically re-rendered when state properties used by given component has changed.

If you don't use React-Redux you can also manually subscribe to store updates using Redux store subscribe method. According to docs subscribe :

Adds a change listener. It will be called any time an action is dispatched, and some part of the state tree may potentially have changed. You may then call getState() to read the current state tree inside the callback.