React-i18next: Does this work with react-redux?

[ChCosmin]

Is this intended/have support to work with react-redux and its or with its connect feature?

[jamuhl]

why? i18next has it's own store for the translations and hoc.

What would you gain by putting the translations into the redux store....?!?

[jamuhl]

but yes...we use redux and react-i18next in the same app - they have nothing todo with each other

[ChCosmin]

not into it but alongside it more like it, i'm still sort of new to react and redux as far as understanding it's functionality completely. So far i'm playing around trying to get the setup to translate any 1 sentence.
Not sure if this is how i should apply the i18next provider

ReactDOM.render(
  <I18nextProvider i18n={i18n}>
    <Provider store={appStore}>
      <BaseApp />
    </Provider>
  </I18nextProvider>,
  appDomElement
);

also in the project that i'm working on we use the connect a lot in our export defaults like this
export default connect(state => ({ cart: state.app.cart, kits: state.app.kits }))(NewLandingPage);
in the examples i've seen
export default translate('translations')(App);

being used and idk how to combine those two

[jamuhl]

yes the provider stuff is correct like you did...but you can even get away with using the i18nextProvider nowadays using: https://react.i18next.com/components/i18next-instance.html --> .use(reactI18nextModule)

regarding the export we do something like:

export default compose(
  anotherHOC,
  translate('myNamespace'),
  connect(mapStateToProps, mapDispatchToProps)
)(MyComponent);

where compose is lodash.compose

[igor-anosov]

This is actually strange but I also got such error. Then I moved a translate HOC to the top of my HOCs in a component and everything worked :)
```
export default compose(
translate('namespace'),

reduxForm({
form: 'addPage',
enableReinitialize: true
}, mapStateToProps ),

connect(mapStateToProps, mapDispatchToProps),
)(MyComponent);

[jamuhl]

no idea why...not to deep into redux...but if anyone knows the reason or has a "fix" i would be very happy...

[jfbloom22]

When I try to follow @jamuhl 's example above with compose, I get this error:
JSX element type 'Login' does not have any construct or call signatures.
I am using react-redux as well as typescript.

One difference is that I am importing compose from Lodash's functional programming sub module like so: import { compose } from 'lodash/fp'; But as best I can tell, this compose function is not any different.

I suspect compose() is confusing typescript and I need to add some types, but I am not sure where to start. Anyone have an example or suggestions for how to use react-18next with react-redux and typescript?

For now, I have things working without compose():

  export default 
  translate('auth')(connect(mapStateToProps, mapDispatchToProps
  )(Login));

Should I expect to have any issues with this?

[jamuhl]

@jfbloom22 if it's just the compose function that makes your setup fail in typescript why not just writing your own compose function like eg. https://github.com/dormakaba-digital/digital-reactnative-client/blob/master/src/utils/misc.js#L8

[alansutherland]

if the @jamuhl's solution doesn't work for anyone else who finds this, here's mine:

const withN = new withNamespaces()(App)
export default connect(mapStateToProps)(withN)

[jamuhl]

@alansutherland sorry but withNamespaces is not a class -> it's just a function!!! so no constructor call.

[alansutherland]

@jamuhl well it doesn't work if you call it as a function but it does work if you call it as a class, not sure why

[jamuhl]

@alansutherland if it works - it works...

[edwinwong90]

@jamuhl solution is worked for me. Note: The compose() is deprecated in lodash use flowRight() instead.

[ashitvora-zz]

When I try to load a different namespace, it throws following error -

Add a

Is it because it tries to dynamically load a new resource bundle file?
How to fix this error?

[jamuhl]

use react Suspense or https://react.i18next.com/latest/usetranslation-hook#not-using-suspense

[moweiwei]

When I try to follow @jamuhl 's example above with compose, I get this error:
JSX element type 'Login' does not have any construct or call signatures.
I am using react-redux as well as typescript.

One difference is that I am importing compose from Lodash's functional programming sub module like so: import { compose } from 'lodash/fp'; But as best I can tell, this compose function is not any different.

I suspect compose() is confusing typescript and I need to add some types, but I am not sure where to start. Anyone have an example or suggestions for how to use react-18next with react-redux and typescript?

For now, I have things working without compose():

  export default 
  translate('auth')(connect(mapStateToProps, mapDispatchToProps
  )(Login));

Should I expect to have any issues with this?

I have the same confuse with you, have resolve it by your methods. thank you.