react-intl с переключателем языка Redux

Я пытаюсь сделать переключатель языка с помощью react-inlt и redux, но когда я пытаюсь переключиться, то представление не отображается (‹ FormattedMessage> не меняется), но работает redux и локаль в ‹ IntlProvider> изменяется . У меня нет никакой ошибки в консоли chrome.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux'; 
import { Provider } from 'react-redux';
import thunk from 'redux-thunk'; 
import { addLocaleData } from 'react-intl';
import en from "react-intl/locale-data/en";
import pl from "react-intl/locale-data/pl";
import App from './App';
import { localeSet } from './actions/locale';
import rootReducer from './rootReducer';
...
...
addLocaleData([...en, ...pl]);
...

App.js

import React from 'react';
import { connect } from 'react-redux';
import { Route } from 'react-router-dom';
import { IntlProvider } from 'react-intl';
import messages from "./messages";
...

class App extends React.Component {

  render() {
    const { lang } = this.props;
    return (
      <IntlProvider locale={lang} messages={messages[lang]}>
        <div className="ui container">
          <TopNavigation />
        </div> 
      </IntlProvider>
    );
  }
}

function mapStateToProps(state) {
  return {
    lang: state.locale.lang
  }
}

export default connect(mapStateToProps)(App);

TopNavigation.js

import { FormattedMessage } from 'react-intl';
import { setLocale } from '../../actions/locale';
...

class TopNavigation extends React.Component {

    render() {

        return (

          <FormattedMessage id="nav.dashboard" defaultMessage="Dashboard" />

           <a role="button" onClick={() => this.props.setLocale("en")}>
             EN
           </a>{" "}
           |
           <a role="button" onClick={() => this.props.setLocale("pl")}>
             PL
           </a>

        );
    }
}

export default connect(null, { setLocale })(TopNavigation);

сообщения.js

export default {
    en: {
        'nav.dashboard' : "Dashboard"
    },
    pl: {
        'nav.dashboard' : "Panel Administracyjny"        
    }
}

действия/locale.js

import { LOCALE_SET } from "../types";

export const localeSet = lang => ({
  type: LOCALE_SET,
  lang
});

export const setLocale = lang => dispatch => {
  localStorage.alhubLang = lang;
  dispatch(localeSet(lang));
};

редукторы/locale.js

import { LOCALE_SET } from "../types";

export default function locale(state ={ lang: "pl"}, action = {}) {
    switch(action.type) {
        case LOCALE_SET:
            return { lang: action.lang };
        default: 
            return state;
    }
}

типы.js

export const LOCALE_SET = "LOCALE_SET";

person JanuszO    schedule 28.12.2017    source источник
comment
это похоже на проблему, аналогичную приведенной здесь: использование данных API">stackoverflow.com/questions/48006705/ Способ доступа к lang: state.locale.lang аналогичен вложенному объекту состояния этого пользователя. Это вызвало повторный рендеринг из-за изменения реквизита при использовании селектора. Вы также можете просто определить свойство как locale: state.locale и указать locale.lang при рендеринге IntlProvider.   -  person brub    schedule 28.12.2017
comment
Вы добавили функцию injectIntl в свои компоненты?   -  person Damien    schedule 21.02.2018