Skip to content

Instantly share code, notes, and snippets.

@jameshy

jameshy/esnextbin.md

Last active November 2, 2016 17:45
Show Gist options
  • Save jameshy/e9d5ce40ab72854f69b979367ffcaced to your computer and use it in GitHub Desktop.
Save jameshy/e9d5ce40ab72854f69b979367ffcaced to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
</head>
<body>
<!-- put markup and other contents here -->
<div id="app"></div>
</body>
</html>
Raw
index.js
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import {
createStore,
combineReducers,
applyMiddleware
} from 'redux';
import { connect, Provider } from 'react-redux';
import {
Form,
Control,
actions,
combineForms,
} from 'react-redux-form';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
const store = createStore(combineForms({
user: {
name: 'initial name',
email: '',
},
}), applyMiddleware(thunk, createLogger()));
/* */
// this does NOT work
store.dispatch(actions.load('user', {
name: 'loaded name'
}))
// this DOES work
//store.dispatch(actions.load('user.name', 'loaded name'))
let nameField = store.getState().forms.user.name
// both of these still equal 'initial name'
// but they should equal 'loaded name' ?
console.log('initialValue:', nameField.initialValue)
console.log('value:', nameField.value)
/* */
class App extends Component {
handleSubmit(vals) {
console.log(vals);
}
render() {
return (
<Form
model="user"
onSubmit={(vals) => this.handleSubmit(vals)}
>
<label>Name:</label>
<Control.text model=".name" />
<br />
<label>Email:</label>
<Control.text type="email" model=".email" />
<br />
<button>Submit!</button>
</Form>
);
}
}
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.querySelector('#app'));
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "15.3.1",
"react-dom": "15.3.1",
"redux": "3.6.0",
"react-redux": "4.4.5",
"react-redux-form": "1.0.15",
"redux-thunk": "2.1.0",
"redux-logger": "2.6.1",
"babel-runtime": "6.18.0"
}
}
Raw
transpiled.js
'use strict';
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _redux = require('redux');
var _reactRedux = require('react-redux');
var _reactReduxForm = require('react-redux-form');
var _reduxThunk = require('redux-thunk');
var _reduxThunk2 = _interopRequireDefault(_reduxThunk);
var _reduxLogger = require('redux-logger');
var _reduxLogger2 = _interopRequireDefault(_reduxLogger);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var store = (0, _redux.createStore)((0, _reactReduxForm.combineForms)({
user: {
name: 'initial name',
email: ''
}
}), (0, _redux.applyMiddleware)(_reduxThunk2.default, (0, _reduxLogger2.default)()));
/* */
// this does NOT work
store.dispatch(_reactReduxForm.actions.load('user', {
name: 'loaded name'
}));
// this DOES work
//store.dispatch(actions.load('user.name', 'loaded name'))
var nameField = store.getState().forms.user.name;
// both of these still equal 'initial name'
// but they should equal 'loaded name' ?
console.log('initialValue:', nameField.initialValue);
console.log('value:', nameField.value);
/* */
var App = function (_Component) {
(0, _inherits3.default)(App, _Component);
function App() {
(0, _classCallCheck3.default)(this, App);
return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(App).apply(this, arguments));
}
(0, _createClass3.default)(App, [{
key: 'handleSubmit',
value: function handleSubmit(vals) {
console.log(vals);
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
return _react2.default.createElement(
_reactReduxForm.Form,
{
model: 'user',
onSubmit: function onSubmit(vals) {
return _this2.handleSubmit(vals);
}
},
_react2.default.createElement(
'label',
null,
'Name:'
),
_react2.default.createElement(_reactReduxForm.Control.text, { model: '.name' }),
_react2.default.createElement('br', null),
_react2.default.createElement(
'label',
null,
'Email:'
),
_react2.default.createElement(_reactReduxForm.Control.text, { type: 'email', model: '.email' }),
_react2.default.createElement('br', null),
_react2.default.createElement(
'button',
null,
'Submit!'
)
);
}
}]);
return App;
}(_react.Component);
_reactDom2.default.render(_react2.default.createElement(
_reactRedux.Provider,
{ store: store },
_react2.default.createElement(App, null)
), document.querySelector('#app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment