注册reduxForm后，react-intl FormattedMessage切换语言不更新

嗨，我之前也碰到过一模一样的问题！这大概率是因为reduxForm包装后的组件没接收到locale变化的触发信号，导致组件没有重新渲染，FormattedMessage自然也就没法同步更新内容了。下面给你几个亲测有效的解决方案：

方案1：通过connect注入locale状态 #

把组件连接到redux中存储locale的状态节点，这样当locale改变时，组件会因为props变化触发重渲染，FormattedMessage就能拿到最新的语言配置了。

import React from 'react';
import { reduxForm, connect } from 'react-redux-form';
import { Form } from 'reactstrap';
import { FormattedMessage } from 'react-intl';

const ExampleForm = ({ handleSubmit }) => (
  <Form onSubmit={handleSubmit}>
    <h2>
      <FormattedMessage id="example.title" />
    </h2>
    ...
  </Form>
);

// 连接到redux中存储locale的状态
const ConnectedExampleForm = connect(state => ({
  locale: state.locale // 这里替换成你项目中locale在redux的实际存储路径
}))(ExampleForm);

// 最后用reduxForm包装组件
export default reduxForm({
  form: 'exampleForm' // 替换成你的表单唯一标识
})(ConnectedExampleForm);

方案2：使用injectIntl高阶组件 #

react-intl提供的injectIntl可以把intl对象注入到组件props里，当locale变化时，intl对象会同步更新，进而触发组件重渲染。

import React from 'react';
import { reduxForm } from 'react-redux-form';
import { Form } from 'reactstrap';
import { FormattedMessage, injectIntl } from 'react-intl';

const ExampleForm = ({ handleSubmit }) => (
  <Form onSubmit={handleSubmit}>
    <h2>
      <FormattedMessage id="example.title" />
    </h2>
    ...
  </Form>
);

// 先注入intl，再用reduxForm包装
export default reduxForm({
  form: 'exampleForm'
})(injectIntl(ExampleForm));

方案3：调整reduxForm的pure配置 #

reduxForm默认开启了pure: true，会对组件props做浅比较。如果你的intl相关props是引用类型，浅比较可能检测不到变化。可以尝试关闭浅比较（注意：这会让组件每次redux状态变化都重渲染，可能影响性能，谨慎使用）：

export default reduxForm({
  form: 'exampleForm',
  pure: false // 关闭浅比较逻辑
})(ExampleForm);

简单说下原理：FormattedMessage的渲染依赖react-intl的上下文，locale变化时上下文会更新，但reduxForm的默认逻辑可能阻止了组件感知这个变化。上面三个方案都是让组件能捕捉到locale的变化信号，触发重渲染，从而让FormattedMessage获取到最新的语言配置。

内容的提问来源于stack exchange，提问作者codeFLOWee