|
| 1 | +/* globals document */ |
| 2 | +import { addLocaleData, FormattedMessage } from 'react-intl' |
| 3 | +import { createStore, combineReducers } from 'redux' |
| 4 | +import { IntlProvider, intlReducer, updateIntl } from 'react-intl-redux' |
| 5 | +import { Provider, connect } from 'react-redux' |
| 6 | +import itLocaleData from 'react-intl/locale-data/it' |
| 7 | +import zhLocaleData from 'react-intl/locale-data/zh' |
| 8 | +import React from 'react' |
| 9 | +import ReactDOM from 'react-dom' |
| 10 | + |
| 11 | +import { createDevTools } from 'redux-devtools' |
| 12 | +import DockMonitor from 'redux-devtools-dock-monitor' |
| 13 | +import LogMonitor from 'redux-devtools-log-monitor' |
| 14 | + |
| 15 | +addLocaleData([...itLocaleData, ...zhLocaleData]) |
| 16 | + |
| 17 | +const UPDATE_LOCALES = 'UPDATE_LOCALES' |
| 18 | + |
| 19 | +function localesReducer(state = {}, action) { |
| 20 | + switch (action.type) { |
| 21 | + case UPDATE_LOCALES: |
| 22 | + return { |
| 23 | + ...state, |
| 24 | + ...action.payload, |
| 25 | + } |
| 26 | + default: |
| 27 | + return state |
| 28 | + } |
| 29 | +} |
| 30 | + |
| 31 | +const reducer = combineReducers({ |
| 32 | + intl: intlReducer, |
| 33 | + locales: localesReducer, |
| 34 | +}) |
| 35 | +const DevTools = createDevTools( |
| 36 | + <DockMonitor |
| 37 | + toggleVisibilityKey="ctrl-h" |
| 38 | + changePositionKey="ctrl-q" |
| 39 | + changeMonitorKey="ctrl-m" |
| 40 | + > |
| 41 | + <LogMonitor /> |
| 42 | + </DockMonitor> |
| 43 | +) |
| 44 | +const store = createStore(reducer, {}, DevTools.instrument()) |
| 45 | + |
| 46 | +const SwitchLocale = connect((state, props) => ({ |
| 47 | + currentLocale: state.intl.locale, |
| 48 | + locales: state.locales, |
| 49 | +}))(({ currentLocale, locales, onChange }) => ( |
| 50 | + <select |
| 51 | + value={currentLocale} |
| 52 | + onChange={e => |
| 53 | + store.dispatch( |
| 54 | + updateIntl({ |
| 55 | + locale: e.target.value, |
| 56 | + messages: locales[e.target.value], |
| 57 | + }) |
| 58 | + )} |
| 59 | + > |
| 60 | + {Object.keys(locales).map(locale => <option key={locale}>{locale}</option>)} |
| 61 | + </select> |
| 62 | +)) |
| 63 | + |
| 64 | +class App extends React.Component { |
| 65 | + handleLoadlLocales = () => { |
| 66 | + store.dispatch({ |
| 67 | + type: UPDATE_LOCALES, |
| 68 | + payload: { |
| 69 | + en: { |
| 70 | + 'app.greeting': 'Hello!', |
| 71 | + }, |
| 72 | + it: { |
| 73 | + 'app.greeting': 'Ciao!', |
| 74 | + }, |
| 75 | + zh: { |
| 76 | + 'app.greeting': '你好!', |
| 77 | + }, |
| 78 | + }, |
| 79 | + }) |
| 80 | + } |
| 81 | + |
| 82 | + render() { |
| 83 | + return ( |
| 84 | + <Provider store={store}> |
| 85 | + <IntlProvider> |
| 86 | + <div> |
| 87 | + <p> |
| 88 | + <FormattedMessage id="app.greeting" defaultMessage="Hello!" /> |
| 89 | + </p> |
| 90 | + <p> |
| 91 | + <button onClick={this.handleLoadlLocales}> |
| 92 | + Local locales |
| 93 | + </button>{' '} |
| 94 | + <SwitchLocale /> |
| 95 | + </p> |
| 96 | + <DevTools /> |
| 97 | + </div> |
| 98 | + </IntlProvider> |
| 99 | + </Provider> |
| 100 | + ) |
| 101 | + } |
| 102 | +} |
| 103 | + |
| 104 | +ReactDOM.render(<App />, document.getElementById('root')) |
0 commit comments