{"action":"opened","issue":{"url":"https://api.github.com/repos/ratson/react-intl-redux/issues/21","repository_url":"https://api.github.com/repos/ratson/react-intl-redux","labels_url":"https://api.github.com/repos/ratson/react-intl-redux/issues/21/labels{/name}","comments_url":"https://api.github.com/repos/ratson/react-intl-redux/issues/21/comments","events_url":"https://api.github.com/repos/ratson/react-intl-redux/issues/21/events","html_url":"https://github.com/ratson/react-intl-redux/issues/21","id":203394522,"number":21,"title":"Calling dispatch updateIntl results in error \"Missing locale data for locale\"","user":{"login":"blair-anson","id":5399102,"avatar_url":"https://avatars.githubusercontent.com/u/5399102?v=3","gravatar_id":"","url":"https://api.github.com/users/blair-anson","html_url":"https://github.com/blair-anson","followers_url":"https://api.github.com/users/blair-anson/followers","following_url":"https://api.github.com/users/blair-anson/following{/other_user}","gists_url":"https://api.github.com/users/blair-anson/gists{/gist_id}","starred_url":"https://api.github.com/users/blair-anson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/blair-anson/subscriptions","organizations_url":"https://api.github.com/users/blair-anson/orgs","repos_url":"https://api.github.com/users/blair-anson/repos","events_url":"https://api.github.com/users/blair-anson/events{/privacy}","received_events_url":"https://api.github.com/users/blair-anson/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-01-26T15:06:49Z","updated_at":"2017-01-26T15:06:49Z","closed_at":null,"body":"\r\nIn a child component I have passed into props the dispatch. I call it like so...\r\n```\r\nthis.props.dispatch(updateIntl({\r\n                eventKey,\r\n                newmessages\r\n            }));\r\n```\r\n...but this results in the following error, even though `eventKey` and `newmessages` have the correct values.\r\n\r\n`[React Intl] Missing locale data for locale: \"undefined\". Using default locale: \"en\" as fallback.`\r\n\r\nHere's the complete code..\r\n\r\n**index.js**\r\n```\r\nimport {addLocaleData, FormattedMessage} from 'react-intl'\r\nimport {createStore, combineReducers} from 'redux'\r\nimport {IntlProvider, intlReducer} from 'react-intl-redux'\r\nimport {Provider} from 'react-redux'\r\nimport itLocaleData from 'react-intl/locale-data/it'\r\nimport jaLocaleData from 'react-intl/locale-data/ja'\r\nimport React from 'react'\r\nimport ReactDOM from 'react-dom'\r\n\r\nimport LanguageSelector from './LanguageSelector';\r\n\r\nconst languageDetected = navigator.language.split('-')[0] || 'en';\r\n\r\nexport const translationMessages = {\r\n    en: {\r\n        'app.greeting': 'Hello!',\r\n    },\r\n    ja: {\r\n        'app.greeting': 'こんにちは!',\r\n    },\r\n    it: {\r\n        'app.greeting': 'Ciao!',\r\n    }\r\n};\r\n\r\n// check if we have translations for the language detected, if not default to english\r\nconst languageMatched = (typeof translationMessages[languageDetected] !== 'undefined') ? languageDetected : 'en';\r\n\r\naddLocaleData([\r\n    ...itLocaleData,\r\n    ...jaLocaleData,\r\n])\r\n\r\nconst reducer = combineReducers({\r\n    intl: intlReducer,\r\n})\r\nconst initialState = {\r\n    intl: {\r\n        defaultLocale: 'en',\r\n        locale: languageMatched,\r\n        messages: translationMessages[languageMatched],\r\n    },\r\n}\r\n\r\n\r\nconst store = createStore(reducer, initialState)\r\n\r\nconst App = () => (\r\n    <Provider store={store}>\r\n        <IntlProvider>\r\n            <div>\r\n                <FormattedMessage id=\"app.greeting\" defaultMessage=\"Intl locale error\" /> <br/>\r\n                Browser language: {languageDetected} <br/>\r\n                <LanguageSelector selectedItem={LanguageSelector.English} dispatch={store.dispatch}/>\r\n            </div>\r\n        </IntlProvider>\r\n    </Provider>\r\n)\r\n\r\nconst rootDiv = document.createElement('div')\r\ndocument.body.appendChild(rootDiv)\r\nReactDOM.render(<App />, rootDiv)\r\n```\r\n\r\n**LanguageSelector.js**\r\n```\r\nimport {Provider} from 'react-redux'\r\nimport itLocaleData from 'react-intl/locale-data/it'\r\nimport jaLocaleData from 'react-intl/locale-data/ja'\r\nimport { DropdownButton, MenuItem } from 'react-bootstrap';\r\nimport {updateIntl} from 'react-intl-redux'\r\nimport React, { Component } from 'react';\r\nimport ReactDOM from 'react-dom'\r\n\r\nimport { translationMessages } from './index';\r\n\r\nconst OPTIONS = {\r\n    'en': {\r\n        title: 'English'\r\n    },\r\n    'ja': {\r\n        title: 'Japanese'\r\n    },\r\n    'it': {\r\n        title: 'Italian'\r\n    }\r\n};\r\n\r\nconst English = 'en',\r\n    Japanese = 'ja',\r\n    Italian = 'it';\r\n\r\nclass LanguageSelector extends Component {\r\n\r\n    static get English() {\r\n            return English;\r\n    }\r\n\r\n    static get Japanese() {\r\n        return Japanese;\r\n    }\r\n\r\n    static get Italian() {\r\n        return Italian;\r\n    }\r\n\r\n    constructor(props, context) {\r\n        super(props,context);\r\n\r\n        this.state = {\r\n            selectedItem: this.props.selectedItem\r\n        };\r\n\r\n        // bind custom function to this\r\n        this.handleSelect = this.handleSelect.bind(this)\r\n    }\r\n\r\n    handleSelect(eventKey,event) {\r\n        this.setState({\r\n            selectedItem: eventKey\r\n        });\r\n\r\n        let newmessages = translationMessages[eventKey]\r\n        let localstring = 'ja'\r\n        this.props.dispatch(updateIntl({\r\n                eventKey,\r\n                newmessages\r\n            }));\r\n\r\n        console.log(eventKey);\r\n        console.log(newmessages);\r\n\r\n    }\r\n\r\n    render() {\r\n        //console.log(OPTIONS[this.state.selectedItem]);\r\n\r\n        return (\r\n            <DropdownButton id=\"lang-dropdown\"\r\n                            title={OPTIONS[this.state.selectedItem].title}\r\n                            onSelect={this.handleSelect}>\r\n                <MenuItem eventKey={'en'}>{OPTIONS['en'].title}</MenuItem>\r\n                <MenuItem eventKey={'ja'}>{OPTIONS['ja'].title}</MenuItem>\r\n            </DropdownButton>\r\n\r\n        );\r\n\r\n\r\n    }\r\n}\r\n\r\n\r\nexport default LanguageSelector;\r\n```"}}
{"actor":{"display_login":"blair-anson"}}