React-i18next: Isn't this supposed to work with react + redux?

[Ricco1]

Hi @jamuhl ,

Isn't react-i18next supposed to work with react redux? For some reason, while I do:

export default class Root extends Component {
  render() {
    const { store, history } = this.props;
    return(
    <I18nextProvider i18n={i18n}>
      <Provider store={store}>
        <Router history={history} routes={routes} />
      </Provider>
    </I18nextProvider>
    );
  }
}

t is not passed via this.props and I am getting that t is undefined. Most likely I am missing something here and I am initializing I18nextProvider incorrectly , but still... do you have any idea/suggestion?

Thanks in advance,

KR,

Ricco

[jamuhl]

The provider does only pass i18n instance to to context - you need to use the translate hoc to pass t to your components. https://react.i18next.com/components/translate-hoc.html

[Ricco1]

Thanks man. Will try this out!

[jamuhl]

any update?

[Ricco1]

Hi,

I tried the approach described in https://react.i18next.com/components/translate-hoc.html, but for some reason it didn't work in a sense that this component just didn't render.

What I did is - created a test component:

import React from 'react';
import { translate } from 'react-i18next';

function i18test(props) {
  const { t } = props;
  console.log('t', t);
  return (
    <div>
      <h1>{t('common:sample')}</h1>
      some test data here
    </div>
  );
}

// short for using defaultNS of i18next
export default translate()(i18test);

and imported it in some other component:

...
import i18test from '../i18test';
...
<div className="error-page-message-container">
   <h3>Error: Access Denied!</h3>
   <h4>To try to log in again, please press the button below</h4>
   <i18test />
</div>
...
function mapDispatchToProps(dispatch){
  return {
    dispatch,
    actions: bindActionCreators({redirectToLogout}, dispatch)
  };
}

export default connect(null, mapDispatchToProps)(ErrorComponent);

Again, most likely I am doing something wrong - but I just can't get what is the issue.

Thanks,

KR,

Ricco

[jamuhl]

can you past your i18n.js ?!? where you initialize the i18next instance? As far as i see all looks right from code. So could be you set react: { wait: true } in i18next options - while loading does not success and cause of the non loading the component does not render.

[Ricco1]

Hi,

Sorry for great delay in feedback - being busy for past week. Here are the contents of the i18n.js:

import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';
// import Cache from 'i18next-localstorage-cache';
import LanguageDetector from 'i18next-browser-languagedetector';


i18n
  .use(XHR)
  // .use(Cache)
  .use(LanguageDetector)
  .init({
    fallbackLng: 'en',

    react: {
      // wait: true, // globally set to wait for loaded translations in translate hoc
      // exposeNamespace: true // exposes namespace on data-i18next-options to be used in eg. locize-editor
    },

    // have a common namespace used around the full app
    ns: ['common'],
    defaultNS: 'common',

    debug: true,

    // cache: {
    //   enabled: true
    // },

    interpolation: {
      escapeValue: false, // not needed for react!!
      formatSeparator: ',',
      format: function(value, format, lng) {
        if (format === 'uppercase') return value.toUpperCase();
        return value;
      }
    }
  });


export default i18n;

[jamuhl]

looks alright to me...do you have same issue with the example project?
https://github.com/i18next/react-i18next/tree/master/example/webpack2

really don't see where you code differ from the example...is your repo accessible public - so i could test it?

[Ricco1]

Unfortunately this project is not available to public as it is protected by NDA :/, but I will try at least the example project, though I am quite sure that it will work (for that reason we have examples :) )

KR,

Ricco

[jamuhl]

closing for now...feel free to reopen granting some access to debug or providing a reproducable testcase.