Can't setActiveLanguage

[vict0rsch]

I have the locale reducer set :

import { localeReducer as locale } from 'react-localize-redux';
combineReducers({ locale, otherReducers});

The languages initialized:

const languageToUse = 'en';
const languages = ['en', 'fr'];
store.dispatch(initialize(languages));
const json = require('../static/texts/global.locale.json');
store.dispatch(addTranslation(json));
store.dispatch(setActiveLanguage(languageToUse));

And the function mapped to the props:

import { getTranslate, getActiveLanguage, setActiveLanguage } from 'react-localize-redux';

function mapStateToProps(state) {
    return {
      restOfState: state.restOfState,
      translate: getTranslate(state.locale),
      currentLanguage: getActiveLanguage(state.locale).code,
      setActiveLanguage: setActiveLanguage,
    };
  }

  export default mapStateToProps;

However calling this.props.setActiveLanguage('fr') in a connected component does not change anything (logging this.props.currentLanguage ). Is this an issue or am I missing something?

[ryandrewjohnson]

@vict0rsch a couple questions:

1. What version of the library are you running?
2. Any chance you can post a working example on https://codesandbox.io?

I just did a quick test with latest version of library and setActiveLanguage seems to be working as expected.

[vict0rsch]

From my package.json : "react-localize-redux": "^2.13.0"

(codesandbox gives me an internal server error running my repo, but it is there:https://github.com/Vict0rSch/oop/tree/master/react)

I don't really know what to check more. Logging this.props.setActiveLanguage gives me:

ƒ setActiveLanguage(languageCode) {
  return {
    type: SET_ACTIVE_LANGUAGE,
    payload: { languageCode: languageCode }
  };
}

which seems to be expected and the languageCode I use, (fr) is indeed the one I defined in initialize(languages)

[vict0rsch]

I may have a clue, it's not a state it's a dispatch.

How do I integrate the setActiveLanguage action into

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}

(by he way, adding

export function setActiveLanguage(languageCode) {
  return {
    type: 'SET_ACTIVE_LANGUAGE',
    payload: { languageCode: languageCode }
  };
}

to my actionCreators does not help)

[ryandrewjohnson]

@vict0rsch sorry missed that in original source you provided. The action creators need to be added to connect like you would any other dispatch props.

So all Action Creators would go in dispatchProps, while all Selectors would go in stateProps.

const mapStateToProps = state => ({
    translate: getTranslate(state)
});

// if using shorthand syntax for dispatchProps
const mapDispatchToProps = {
     setActiveLanguage
};

// or long form
const mapDispatchToProps = dispatch => {
  return bindActionCreators({setActiveLanguage}, dispatch);
};

const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent)

Then in MyComponent you'd have access to this.props.setActiveLanguage.

[vict0rsch]

Ok that wokrs. Thanks a lot for your help :) Very useful and well done package btw!