fix: fix state typo, fixes #1411

Author: longlho

src/components/provider.tsx

@@ -73,19 +73,19 @@ export default class IntlProvider extends React.PureComponent<
   private cache: IntlCache = createIntlCache();
   state: State = {
     cache: this.cache,
-    intl: createIntl(filterIntlConfig(this.props)),
+    intl: createIntl(filterIntlConfig(this.props), this.cache),
     prevConfig: filterIntlConfig(this.props),
   };
 
   static getDerivedStateFromProps(
     props: OptionalIntlConfig,
     {prevConfig, cache}: State
-  ) {
+  ): Partial<State> | null {
     const config = filterIntlConfig(props);
     if (!shallowEquals(prevConfig, config)) {
       return {
         intl: createIntl(config, cache),
-        prevProps: config,
+        prevConfig: config,
       };
     }
     return null;

test/unit/components/__snapshots__/useIntl.tsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useIntl() hook should work when switching locale on provider 1`] = `
+<IntlProvider
+  defaultFormats={Object {}}
+  defaultLocale="en"
+  formats={Object {}}
+  locale="en"
+  messages={Object {}}
+  onError={[Function]}
+  textComponent={Symbol(react.fragment)}
+>
+  <FC>
+    $10,000.00
+  </FC>
+</IntlProvider>
+`;
+
+exports[`useIntl() hook should work when switching locale on provider 2`] = `
+<IntlProvider
+  defaultFormats={Object {}}
+  defaultLocale="en"
+  formats={Object {}}
+  locale="es"
+  messages={Object {}}
+  onError={[Function]}
+  textComponent={Symbol(react.fragment)}
+>
+  <FC>
+    10.000,00 US$
+  </FC>
+</IntlProvider>
+`;
+
+exports[`useIntl() hook should work when switching locale on provider 3`] = `
+<IntlProvider
+  defaultFormats={Object {}}
+  defaultLocale="en"
+  formats={Object {}}
+  locale="en"
+  messages={Object {}}
+  onError={[Function]}
+  textComponent={Symbol(react.fragment)}
+>
+  <FC>
+    $10,000.00
+  </FC>
+</IntlProvider>
+`;

test/unit/components/useIntl.tsx

@@ -9,6 +9,11 @@ const FunctionComponent = ({spy}) => {
   return null;
 };
 
+const FC = () => {
+  const {formatNumber} = useIntl();
+  return formatNumber(10000, {style: 'currency', currency: 'USD'}) as any;
+};
+
 describe('useIntl() hook', () => {
   it('throws when <IntlProvider> is missing from ancestry', () => {
     const consoleError = jest
@@ -30,4 +35,21 @@ describe('useIntl() hook', () => {
     const intl = rendered.state('intl');
     expect(spy).toHaveBeenCalledWith(intl);
   });
+
+  it('should work when switching locale on provider', () => {
+    const rendered = mount(
+      <IntlProvider locale="en">
+        <FC />
+      </IntlProvider>
+    );
+    expect(rendered).toMatchSnapshot();
+    rendered.setProps({
+      locale: 'es',
+    });
+    expect(rendered).toMatchSnapshot();
+    rendered.setProps({
+      locale: 'en',
+    });
+    expect(rendered).toMatchSnapshot();
+  });
 });