RunKit + npm: react-put

// Shows how react-put can be used with redux. // For more information, please visit https://www.npmjs.com/package/react-put // Click the button at the buttom of the page to clone and modify the code. const React = require('react'); const ReactDOMServer = require('react-dom/server'); const { Component } = React; const { createStore, combineReducers } = require('redux'); const { connect, Provider } = require('react-redux'); const connectPut = require('react-put'); const EN = { hello: 'Hello', welcome: name => `welcome ${name}`, testKey: 'someValue', haveApple: (name, amount) => `${name} has ${amount} ${amount === 1 ? 'apple' : 'apples'}`, button_not_working: 'This button does not work on RunKit. (Change the default state on line 24)', }; const HANS = { hello: '你好', welcome: name => `欢迎 ${name}`, testKey: '一些值', haveApple: (name, amount) => `${name} 有 ${amount} 个苹果`, button_not_working: '此按钮在 RunKit 下不可用', }; function dictionary(state = EN, action) { switch (action.type) { case 'SET_DICT': return action.dictionary; default: return state; } } const store = createStore(combineReducers({ dictionary })); const mapStateToProps = state => Object.assign({}, { dictionary: state.dictionary }); class App extends Component { constructor(props) { super(props); this.clickHans = () => { this.props.dispatch({ type: 'SET_DICT', dictionary: HANS }); }; } render() { let translate = this.props.put; return ( <div> <p>{translate('hello')}, {translate('welcome', 'username')}</p> <p>{translate('haveApple', 'username', 3)}</p> <p>{translate('testKey')}</p> <p>{translate('button_not_working')}</p> <button id="toHans" onClick={this.clickHans}>HANS</button> </div> ); } } App.propTypes = { put: React.PropTypes.func.isRequired, dispatch: React.PropTypes.func.isRequired, }; let ConnectedApp; const options = { mapPropToDictionary: props => Object.assign({}, props.dictionary), }; ConnectedApp = connectPut(options)(App); ConnectedApp = connect(mapStateToProps)(ConnectedApp); class Root extends Component { render() { return ( <Provider store={store}> <ConnectedApp /> </Provider> ); } } ReactDOMServer.renderToString( <Root /> );