Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

redux-form

Package Overview
Dependencies
Maintainers
1
Versions
236
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

redux-form - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

lib/actions.js
lib/actionTypes.js
lib/createFormReducer.js
lib/reduxForm.js
LICENSE

835

dist/react-redux.js

@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

root["ReduxForm"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
})(this, function(__WEBPACK_EXTERNAL_MODULE_4__) {
return /******/ (function(modules) { // webpackBootstrap

@@ -62,4 +62,201 @@ /******/ // The module cache

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _createFormReducer = __webpack_require__(6);
var _createFormReducer2 = _interopRequireDefault(_createFormReducer);
var _reduxForm = __webpack_require__(7);
var _reduxForm2 = _interopRequireDefault(_reduxForm);
exports['default'] = _reduxForm2['default'];
exports.createFormReducer = _createFormReducer2['default'];
/***/ },
/* 1 */
/***/ function(module, exports) {
'use strict';
exports.__esModule = true;
var CHANGE = 'REDUX_FORM_CHANGE';
exports.CHANGE = CHANGE;
var VALIDATE = 'REDUX_FORM_VALIDATE';
exports.VALIDATE = VALIDATE;
var RESET = 'REDUX_FORM_RESET';
exports.RESET = RESET;
/***/ },
/* 2 */
/***/ function(module, exports) {
"use strict";
exports.__esModule = true;
exports["default"] = createStoreShape;
function createStoreShape(PropTypes) {
return PropTypes.shape({
subscribe: PropTypes.func.isRequired,
dispatch: PropTypes.func.isRequired,
getState: PropTypes.func.isRequired
});
}
module.exports = exports["default"];
/***/ },
/* 3 */
/***/ function(module, exports) {
'use strict';
exports.__esModule = true;
exports['default'] = getDisplayName;
function getDisplayName(Component) {
return Component.displayName || Component.name || 'Component';
}
module.exports = exports['default'];
/***/ },
/* 4 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports.change = change;
exports.validate = validate;
exports.reset = reset;
var _actionTypes = __webpack_require__(1);
function change(form, field, value) {
return {
type: _actionTypes.CHANGE,
form: form,
field: field,
value: value
};
}
function validate(form) {
return {
type: _actionTypes.VALIDATE,
form: form
};
}
function reset(form) {
return {
type: _actionTypes.RESET,
form: form
};
}
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
exports['default'] = createFormReducer;
var _actionTypes = __webpack_require__(1);
/**
* Creates a state structure like:
* {
* data: {
* field1: 'value1',
* field2: 'value2'
* },
* errors: {
* field1: 'error for field1',
* field2: 'error for field2'
* },
* visited: {
* field1: true,
* field2: false
* }
* }
*
* A field has been "visited" if its value has been updated since the creation of the reducer.
*
* @param name the name of the "state slice" where the data is stored
* @param fields an array of field names, used when validating all values
* @param validate a validation function that takes all the data and returns all the errors
* @param initialData initial data to populate the state with
* @returns {Function} a form reducer
*/
function createFormReducer(name, fields) {
var validate = arguments.length <= 2 || arguments[2] === undefined ? function () {} : arguments[2];
var initialData = arguments.length <= 3 || arguments[3] === undefined ? {} : arguments[3];
return function () {
var state = arguments.length <= 0 || arguments[0] === undefined ? { data: initialData, errors: {}, visited: {} } : arguments[0];
var _extends2, _extends3;
var action = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
if (action.form !== name) {
return state;
}
switch (action.type) {
case _actionTypes.CHANGE:
var data = _extends({}, state.data, (_extends2 = {}, _extends2[action.field] = action.value, _extends2));
return _extends({}, state, {
data: data,
errors: validate(data),
visited: _extends({}, state.visited, (_extends3 = {}, _extends3[action.field] = true, _extends3))
});
case _actionTypes.VALIDATE:
var errors = validate(state.data);
var visited = state.visited;
fields.forEach(function (key) {
return visited[key] = true;
}); // mark all as visited
return _extends({}, state, {
errors: errors,
visited: visited
});
case _actionTypes.RESET:
return {
data: initialData,
errors: {},
visited: {}
};
default:
return state;
}
};
}
module.exports = exports['default'];
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

@@ -75,6 +272,10 @@

var _react = __webpack_require__(1);
var _react = __webpack_require__(4);
var _react2 = _interopRequireDefault(_react);
var _reactRedux = __webpack_require__(13);
var _actions = __webpack_require__(5);
var getDisplayName = function getDisplayName(Comp) {

@@ -89,3 +290,3 @@ return Comp.displayName || Comp.name || 'Component';

function reduxForm(sliceName, changeCreator) {
function reduxForm(sliceName) {
return function (DecoratedComponent) {

@@ -96,3 +297,3 @@ return (function (_Component) {

function ReduxForm() {
_classCallCheck(this, ReduxForm);
_classCallCheck(this, _ReduxForm);

@@ -102,24 +303,21 @@ _Component.apply(this, arguments);

ReduxForm.prototype.componentWillMount = function componentWillMount() {
var store = this.context.store;
if (!store) {
throw new Error('No store found. @reduxForm decorated component must be inside a redux <Provider>');
}
};
ReduxForm.prototype.render = function render() {
var store = this.context.store;
var dispatch = store.dispatch;
var _props = this.props;
var slice = _props.slice;
var dispatch = _props.dispatch;
var _store$getState = store.getState();
var state = _store$getState[sliceName].state;
var handleChange = function handleChange(name) {
return function (value) {
return dispatch(changeCreator(sliceName, name, value));
return function (event) {
return dispatch(_actions.change(sliceName, name, event.target.value));
};
};
return _react2['default'].createElement(DecoratedComponent, _extends({ handleChange: handleChange }, state));
return _react2['default'].createElement(DecoratedComponent, _extends({
handleChange: handleChange,
validate: function () {
return dispatch(_actions.validate(sliceName));
},
reset: function () {
return dispatch(_actions.reset(sliceName));
}
}, slice));
};

@@ -136,9 +334,6 @@

}, {
key: 'contextTypes',
key: 'propTypes',
value: {
store: _react.PropTypes.shape({
subscribe: _react.PropTypes.func.isRequired,
dispatch: _react.PropTypes.func.isRequired,
getState: _react.PropTypes.func.isRequired
})
slice: _react.PropTypes.object,
dispatch: _react.PropTypes.func.isRequired
},

@@ -148,2 +343,8 @@ enumerable: true

var _ReduxForm = ReduxForm;
ReduxForm = _reactRedux.connect(function (state) {
return {
slice: state[sliceName]
};
})(ReduxForm) || ReduxForm;
return ReduxForm;

@@ -157,7 +358,583 @@ })(_react.Component);

/***/ },
/* 1 */
/* 8 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports['default'] = createAll;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _createProvider = __webpack_require__(12);
var _createProvider2 = _interopRequireDefault(_createProvider);
var _createProvideDecorator = __webpack_require__(11);
var _createProvideDecorator2 = _interopRequireDefault(_createProvideDecorator);
var _createConnector = __webpack_require__(10);
var _createConnector2 = _interopRequireDefault(_createConnector);
var _createConnectDecorator = __webpack_require__(9);
var _createConnectDecorator2 = _interopRequireDefault(_createConnectDecorator);
function createAll(React) {
// Wrapper components
var Provider = _createProvider2['default'](React);
var Connector = _createConnector2['default'](React);
// Higher-order components (decorators)
var provide = _createProvideDecorator2['default'](React, Provider);
var connect = _createConnectDecorator2['default'](React, Connector);
return { Provider: Provider, Connector: Connector, provide: provide, connect: connect };
}
module.exports = exports['default'];
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
exports['default'] = createConnectDecorator;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
var _utilsGetDisplayName = __webpack_require__(3);
var _utilsGetDisplayName2 = _interopRequireDefault(_utilsGetDisplayName);
var _utilsShallowEqualScalar = __webpack_require__(16);
var _utilsShallowEqualScalar2 = _interopRequireDefault(_utilsShallowEqualScalar);
function createConnectDecorator(React, Connector) {
var Component = React.Component;
return function connect(select) {
return function (DecoratedComponent) {
return (function (_Component) {
function ConnectorDecorator() {
_classCallCheck(this, ConnectorDecorator);
_Component.apply(this, arguments);
}
_inherits(ConnectorDecorator, _Component);
ConnectorDecorator.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
return !_utilsShallowEqualScalar2['default'](this.props, nextProps);
};
ConnectorDecorator.prototype.render = function render() {
var _this = this;
return React.createElement(
Connector,
{ select: function (state) {
return select(state, _this.props);
} },
function (stuff) {
return React.createElement(DecoratedComponent, _extends({}, stuff, _this.props));
}
);
};
_createClass(ConnectorDecorator, null, [{
key: 'displayName',
value: 'Connector(' + _utilsGetDisplayName2['default'](DecoratedComponent) + ')',
enumerable: true
}, {
key: 'DecoratedComponent',
value: DecoratedComponent,
enumerable: true
}]);
return ConnectorDecorator;
})(Component);
};
};
}
module.exports = exports['default'];
/***/ },
/* 10 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
exports['default'] = createConnector;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
var _utilsCreateStoreShape = __webpack_require__(2);
var _utilsCreateStoreShape2 = _interopRequireDefault(_utilsCreateStoreShape);
var _utilsShallowEqual = __webpack_require__(15);
var _utilsShallowEqual2 = _interopRequireDefault(_utilsShallowEqual);
var _utilsIsPlainObject = __webpack_require__(14);
var _utilsIsPlainObject2 = _interopRequireDefault(_utilsIsPlainObject);
var _invariant = __webpack_require__(17);
var _invariant2 = _interopRequireDefault(_invariant);
function createConnector(React) {
var Component = React.Component;
var PropTypes = React.PropTypes;
var storeShape = _utilsCreateStoreShape2['default'](PropTypes);
return (function (_Component) {
function Connector(props, context) {
_classCallCheck(this, Connector);
_Component.call(this, props, context);
this.state = this.selectState(props, context);
}
_inherits(Connector, _Component);
Connector.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
return !this.isSliceEqual(this.state.slice, nextState.slice) || !_utilsShallowEqual2['default'](this.props, nextProps);
};
Connector.prototype.isSliceEqual = function isSliceEqual(slice, nextSlice) {
var isRefEqual = slice === nextSlice;
if (isRefEqual) {
return true;
} else if (typeof slice !== 'object' || typeof nextSlice !== 'object') {
return isRefEqual;
}
return _utilsShallowEqual2['default'](slice, nextSlice);
};
Connector.prototype.componentDidMount = function componentDidMount() {
this.unsubscribe = this.context.store.subscribe(this.handleChange.bind(this));
this.handleChange();
};
Connector.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.select !== this.props.select) {
// Force the state slice recalculation
this.handleChange(nextProps);
}
};
Connector.prototype.componentWillUnmount = function componentWillUnmount() {
this.unsubscribe();
};
Connector.prototype.handleChange = function handleChange() {
var props = arguments[0] === undefined ? this.props : arguments[0];
var nextState = this.selectState(props, this.context);
if (!this.isSliceEqual(this.state.slice, nextState.slice)) {
this.setState(nextState);
}
};
Connector.prototype.selectState = function selectState(props, context) {
var state = context.store.getState();
var slice = props.select(state);
_invariant2['default'](_utilsIsPlainObject2['default'](slice), 'The return value of `select` prop must be an object. Instead received %s.', slice);
return { slice: slice };
};
Connector.prototype.render = function render() {
var children = this.props.children;
var slice = this.state.slice;
var dispatch = this.context.store.dispatch;
return children(_extends({ dispatch: dispatch }, slice));
};
_createClass(Connector, null, [{
key: 'contextTypes',
value: {
store: storeShape.isRequired
},
enumerable: true
}, {
key: 'propTypes',
value: {
children: PropTypes.func.isRequired,
select: PropTypes.func.isRequired
},
enumerable: true
}, {
key: 'defaultProps',
value: {
select: function select(state) {
return state;
}
},
enumerable: true
}]);
return Connector;
})(Component);
}
module.exports = exports['default'];
/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
exports['default'] = createProvideDecorator;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
var _utilsGetDisplayName = __webpack_require__(3);
var _utilsGetDisplayName2 = _interopRequireDefault(_utilsGetDisplayName);
function createProvideDecorator(React, Provider) {
var Component = React.Component;
return function provide(store) {
return function (DecoratedComponent) {
return (function (_Component) {
function ProviderDecorator() {
_classCallCheck(this, ProviderDecorator);
_Component.apply(this, arguments);
}
_inherits(ProviderDecorator, _Component);
ProviderDecorator.prototype.render = function render() {
var _this = this;
return React.createElement(
Provider,
{ store: store },
function () {
return React.createElement(DecoratedComponent, _this.props);
}
);
};
_createClass(ProviderDecorator, null, [{
key: 'displayName',
value: 'Provider(' + _utilsGetDisplayName2['default'](DecoratedComponent) + ')',
enumerable: true
}, {
key: 'DecoratedComponent',
value: DecoratedComponent,
enumerable: true
}]);
return ProviderDecorator;
})(Component);
};
};
}
module.exports = exports['default'];
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
exports['default'] = createProvider;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
var _utilsCreateStoreShape = __webpack_require__(2);
var _utilsCreateStoreShape2 = _interopRequireDefault(_utilsCreateStoreShape);
function createProvider(React) {
var Component = React.Component;
var PropTypes = React.PropTypes;
var storeShape = _utilsCreateStoreShape2['default'](PropTypes);
return (function (_Component) {
function Provider(props, context) {
_classCallCheck(this, Provider);
_Component.call(this, props, context);
this.state = { store: props.store };
}
_inherits(Provider, _Component);
Provider.prototype.getChildContext = function getChildContext() {
return { store: this.state.store };
};
Provider.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var store = this.state.store;
var nextStore = nextProps.store;
if (store !== nextStore) {
var nextReducer = nextStore.getReducer();
store.replaceReducer(nextReducer);
}
};
Provider.prototype.render = function render() {
var children = this.props.children;
return children();
};
_createClass(Provider, null, [{
key: 'childContextTypes',
value: {
store: storeShape.isRequired
},
enumerable: true
}, {
key: 'propTypes',
value: {
children: PropTypes.func.isRequired
},
enumerable: true
}]);
return Provider;
})(Component);
}
module.exports = exports['default'];
/***/ },
/* 13 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = __webpack_require__(4);
var _react2 = _interopRequireDefault(_react);
var _componentsCreateAll = __webpack_require__(8);
var _componentsCreateAll2 = _interopRequireDefault(_componentsCreateAll);
var _createAll = _componentsCreateAll2['default'](_react2['default']);
var Provider = _createAll.Provider;
var Connector = _createAll.Connector;
var provide = _createAll.provide;
var connect = _createAll.connect;
exports.Provider = Provider;
exports.Connector = Connector;
exports.provide = provide;
exports.connect = connect;
/***/ },
/* 14 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
'use strict';
exports.__esModule = true;
exports['default'] = isPlainObject;
function isPlainObject(obj) {
return obj ? typeof obj === 'object' && Object.getPrototypeOf(obj) === Object.prototype : false;
}
module.exports = exports['default'];
/***/ },
/* 15 */
/***/ function(module, exports) {
"use strict";
exports.__esModule = true;
exports["default"] = shallowEqual;
function shallowEqual(objA, objB) {
if (objA === objB) {
return true;
}
var keysA = Object.keys(objA);
var keysB = Object.keys(objB);
if (keysA.length !== keysB.length) {
return false;
}
// Test for A's keys different from B.
var hasOwn = Object.prototype.hasOwnProperty;
for (var i = 0; i < keysA.length; i++) {
if (!hasOwn.call(objB, keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) {
return false;
}
}
return true;
}
module.exports = exports["default"];
/***/ },
/* 16 */
/***/ function(module, exports) {
'use strict';
exports.__esModule = true;
exports['default'] = shallowEqualScalar;
function shallowEqualScalar(objA, objB) {
if (objA === objB) {
return true;
}
if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
return false;
}
var keysA = Object.keys(objA);
var keysB = Object.keys(objB);
if (keysA.length !== keysB.length) {
return false;
}
// Test for A's keys different from B.
var hasOwn = Object.prototype.hasOwnProperty;
for (var i = 0; i < keysA.length; i++) {
if (!hasOwn.call(objB, keysA[i])) {
return false;
}
var valA = objA[keysA[i]];
var valB = objB[keysA[i]];
if (valA !== valB || typeof valA === 'object' || typeof valB === 'object') {
return false;
}
}
return true;
}
module.exports = exports['default'];
/***/ },
/* 17 */
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule invariant
*/
'use strict';
/**
* Use invariant() to assert state which your program assumes to be true.
*
* Provide sprintf-style format (only %s is supported) and arguments
* to provide information about what broke and what you were
* expecting.
*
* The invariant message will be stripped in production, but the invariant
* will remain to ensure logic does not differ in production.
*/
var invariant = function(condition, format, a, b, c, d, e, f) {
if ((undefined) !== 'production') {
if (format === undefined) {
throw new Error('invariant requires an error message argument');
}
}
if (!condition) {
var error;
if (format === undefined) {
error = new Error(
'Minified exception occurred; use the non-minified dev environment ' +
'for the full error message and additional helpful warnings.'
);
} else {
var args = [a, b, c, d, e, f];
var argIndex = 0;
error = new Error(
'Invariant Violation: ' +
format.replace(/%s/g, function() { return args[argIndex++]; })
);
}
error.framesToPop = 1; // we don't care about invariant's own frame
throw error;
}
};
module.exports = invariant;
/***/ }

@@ -164,0 +941,0 @@ /******/ ])

2

dist/react-redux.min.js

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReduxForm=t(require("react")):e.ReduxForm=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function a(e,t){return function(r){return function(n){function a(){o(this,a),n.apply(this,arguments)}return u(a,n),a.prototype.componentWillMount=function(){var e=this.context.store;if(!e)throw new Error("No store found. @reduxForm decorated component must be inside a redux <Provider>")},a.prototype.render=function(){var n=this.context.store,o=n.dispatch,u=n.getState(),a=u[e].state,c=function(r){return function(n){return o(t(e,r,n))}};return s.default.createElement(r,i({handleChange:c},a))},c(a,null,[{key:"displayName",value:"ReduxForm("+f(r)+")",enumerable:!0},{key:"DecoratedComponent",value:r,enumerable:!0},{key:"contextTypes",value:{store:p.PropTypes.shape({subscribe:p.PropTypes.func.isRequired,dispatch:p.PropTypes.func.isRequired,getState:p.PropTypes.func.isRequired})},enumerable:!0}]),a}(p.Component)}}t.__esModule=!0;var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}();t.default=a;var p=r(1),s=n(p),f=function(e){return e.displayName||e.name||"Component"};e.exports=t.default},function(t,r){t.exports=e}])});
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReduxForm=t(require("react")):e.ReduxForm=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var o=r(6),u=n(o),a=r(7),i=n(a);t.default=i.default,t.createFormReducer=u.default},function(e,t){"use strict";t.__esModule=!0;var r="REDUX_FORM_CHANGE";t.CHANGE=r;var n="REDUX_FORM_VALIDATE";t.VALIDATE=n;var o="REDUX_FORM_RESET";t.RESET=o},function(e,t){"use strict";function r(e){return e.shape({subscribe:e.func.isRequired,dispatch:e.func.isRequired,getState:e.func.isRequired})}t.__esModule=!0,t.default=r,e.exports=t.default},function(e,t){"use strict";function r(e){return e.displayName||e.name||"Component"}t.__esModule=!0,t.default=r,e.exports=t.default},function(t,r){t.exports=e},function(e,t,r){"use strict";function n(e,t,r){return{type:a.CHANGE,form:e,field:t,value:r}}function o(e){return{type:a.VALIDATE,form:e}}function u(e){return{type:a.RESET,form:e}}t.__esModule=!0,t.change=n,t.validate=o,t.reset=u;var a=r(1)},function(e,t,r){"use strict";function n(e,t){var r=arguments.length<=2||void 0===arguments[2]?function(){}:arguments[2],n=arguments.length<=3||void 0===arguments[3]?{}:arguments[3];return function(){var a,i,c=arguments.length<=0||void 0===arguments[0]?{data:n,errors:{},visited:{}}:arguments[0],s=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];if(s.form!==e)return c;switch(s.type){case u.CHANGE:var l=o({},c.data,(a={},a[s.field]=s.value,a));return o({},c,{data:l,errors:r(l),visited:o({},c.visited,(i={},i[s.field]=!0,i))});case u.VALIDATE:var f=r(c.data),p=c.visited;return t.forEach(function(e){return p[e]=!0}),o({},c,{errors:f,visited:p});case u.RESET:return{data:n,errors:{},visited:{}};default:return c}}}t.__esModule=!0;var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e};t.default=n;var u=r(1);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function a(e){return function(t){return function(r){function n(){o(this,a),r.apply(this,arguments)}u(n,r),n.prototype.render=function(){var r=this.props,n=r.slice,o=r.dispatch,u=function(t){return function(r){return o(p.change(e,t,r.target.value))}};return l.default.createElement(t,i({handleChange:u,validate:function(){return o(p.validate(e))},reset:function(){return o(p.reset(e))}},n))},c(n,null,[{key:"displayName",value:"ReduxForm("+d(t)+")",enumerable:!0},{key:"DecoratedComponent",value:t,enumerable:!0},{key:"propTypes",value:{slice:s.PropTypes.object,dispatch:s.PropTypes.func.isRequired},enumerable:!0}]);var a=n;return n=f.connect(function(t){return{slice:t[e]}})(n)||n}(s.Component)}}t.__esModule=!0;var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}();t.default=a;var s=r(4),l=n(s),f=r(13),p=r(5),d=function(e){return e.displayName||e.name||"Component"};e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e){var t=a.default(e),r=l.default(e),n=c.default(e,t),o=p.default(e,r);return{Provider:t,Connector:r,provide:n,connect:o}}t.__esModule=!0,t.default=o;var u=r(12),a=n(u),i=r(11),c=n(i),s=r(10),l=n(s),f=r(9),p=n(f);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)}function a(e,t){var r=e.Component;return function(n){return function(a){return function(r){function s(){o(this,s),r.apply(this,arguments)}return u(s,r),s.prototype.shouldComponentUpdate=function(e){return!p.default(this.props,e)},s.prototype.render=function(){var r=this;return e.createElement(t,{select:function(e){return n(e,r.props)}},function(t){return e.createElement(a,i({},t,r.props))})},c(s,null,[{key:"displayName",value:"Connector("+l.default(a)+")",enumerable:!0},{key:"DecoratedComponent",value:a,enumerable:!0}]),s}(r)}}}t.__esModule=!0;var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}();t.default=a;var s=r(3),l=n(s),f=r(16),p=n(f);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)}function a(e){var t=e.Component,r=e.PropTypes,n=l.default(r);return function(e){function t(r,n){o(this,t),e.call(this,r,n),this.state=this.selectState(r,n)}return u(t,e),t.prototype.shouldComponentUpdate=function(e,t){return!this.isSliceEqual(this.state.slice,t.slice)||!p.default(this.props,e)},t.prototype.isSliceEqual=function(e,t){var r=e===t;return r?!0:"object"!=typeof e||"object"!=typeof t?r:p.default(e,t)},t.prototype.componentDidMount=function(){this.unsubscribe=this.context.store.subscribe(this.handleChange.bind(this)),this.handleChange()},t.prototype.componentWillReceiveProps=function(e){e.select!==this.props.select&&this.handleChange(e)},t.prototype.componentWillUnmount=function(){this.unsubscribe()},t.prototype.handleChange=function(){var e=void 0===arguments[0]?this.props:arguments[0],t=this.selectState(e,this.context);this.isSliceEqual(this.state.slice,t.slice)||this.setState(t)},t.prototype.selectState=function(e,t){var r=t.store.getState(),n=e.select(r);return h.default(v.default(n),"The return value of `select` prop must be an object. Instead received %s.",n),{slice:n}},t.prototype.render=function(){var e=this.props.children,t=this.state.slice,r=this.context.store.dispatch;return e(i({dispatch:r},t))},c(t,null,[{key:"contextTypes",value:{store:n.isRequired},enumerable:!0},{key:"propTypes",value:{children:r.func.isRequired,select:r.func.isRequired},enumerable:!0},{key:"defaultProps",value:{select:function(e){return e}},enumerable:!0}]),t}(t)}t.__esModule=!0;var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}();t.default=a;var s=r(2),l=n(s),f=r(15),p=n(f),d=r(14),v=n(d),y=r(17),h=n(y);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)}function a(e,t){var r=e.Component;return function(n){return function(a){return function(r){function c(){o(this,c),r.apply(this,arguments)}return u(c,r),c.prototype.render=function(){var r=this;return e.createElement(t,{store:n},function(){return e.createElement(a,r.props)})},i(c,null,[{key:"displayName",value:"Provider("+s.default(a)+")",enumerable:!0},{key:"DecoratedComponent",value:a,enumerable:!0}]),c}(r)}}}t.__esModule=!0;var i=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}();t.default=a;var c=r(3),s=n(c);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)}function a(e){var t=e.Component,r=e.PropTypes,n=s.default(r);return function(e){function t(r,n){o(this,t),e.call(this,r,n),this.state={store:r.store}}return u(t,e),t.prototype.getChildContext=function(){return{store:this.state.store}},t.prototype.componentWillReceiveProps=function(e){var t=this.state.store,r=e.store;if(t!==r){var n=r.getReducer();t.replaceReducer(n)}},t.prototype.render=function(){var e=this.props.children;return e()},i(t,null,[{key:"childContextTypes",value:{store:n.isRequired},enumerable:!0},{key:"propTypes",value:{children:r.func.isRequired},enumerable:!0}]),t}(t)}t.__esModule=!0;var i=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}();t.default=a;var c=r(2),s=n(c);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var o=r(4),u=n(o),a=r(8),i=n(a),c=i.default(u.default),s=c.Provider,l=c.Connector,f=c.provide,p=c.connect;t.Provider=s,t.Connector=l,t.provide=f,t.connect=p},function(e,t){"use strict";function r(e){return e?"object"==typeof e&&Object.getPrototypeOf(e)===Object.prototype:!1}t.__esModule=!0,t.default=r,e.exports=t.default},function(e,t){"use strict";function r(e,t){if(e===t)return!0;var r=Object.keys(e),n=Object.keys(t);if(r.length!==n.length)return!1;for(var o=Object.prototype.hasOwnProperty,u=0;u<r.length;u++)if(!o.call(t,r[u])||e[r[u]]!==t[r[u]])return!1;return!0}t.__esModule=!0,t.default=r,e.exports=t.default},function(e,t){"use strict";function r(e,t){if(e===t)return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var r=Object.keys(e),n=Object.keys(t);if(r.length!==n.length)return!1;for(var o=Object.prototype.hasOwnProperty,u=0;u<r.length;u++){if(!o.call(t,r[u]))return!1;var a=e[r[u]],i=t[r[u]];if(a!==i||"object"==typeof a||"object"==typeof i)return!1}return!0}t.__esModule=!0,t.default=r,e.exports=t.default},function(e,t,r){"use strict";var n=function(e,t,r,n,o,u,a,i){if(!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var s=[r,n,o,u,a,i],l=0;c=new Error("Invariant Violation: "+t.replace(/%s/g,function(){return s[l++]}))}throw c.framesToPop=1,c}};e.exports=n}])});

86

lib/index.js

@@ -5,87 +5,13 @@ 'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
exports['default'] = reduxForm;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var _createFormReducer = require('./createFormReducer');
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _createFormReducer2 = _interopRequireDefault(_createFormReducer);
var _react = require('react');
var _reduxForm = require('./reduxForm');
var _react2 = _interopRequireDefault(_react);
var _reduxForm2 = _interopRequireDefault(_reduxForm);
var getDisplayName = function getDisplayName(Comp) {
return Comp.displayName || Comp.name || 'Component';
};
/**
* @param sliceName The key in the state corresponding to the data in this form
* @param changeCreator An action creator to accept changes in the form changeCreator(sliceName, field, value)
*/
function reduxForm(sliceName, changeCreator) {
return function (DecoratedComponent) {
return (function (_Component) {
_inherits(ReduxForm, _Component);
function ReduxForm() {
_classCallCheck(this, ReduxForm);
_Component.apply(this, arguments);
}
ReduxForm.prototype.componentWillMount = function componentWillMount() {
var store = this.context.store;
if (!store) {
throw new Error('No store found. @reduxForm decorated component must be inside a redux <Provider>');
}
};
ReduxForm.prototype.render = function render() {
var store = this.context.store;
var dispatch = store.dispatch;
var _store$getState = store.getState();
var state = _store$getState[sliceName].state;
var handleChange = function handleChange(name) {
return function (value) {
return dispatch(changeCreator(sliceName, name, value));
};
};
return _react2['default'].createElement(DecoratedComponent, _extends({ handleChange: handleChange }, state));
};
_createClass(ReduxForm, null, [{
key: 'displayName',
value: 'ReduxForm(' + getDisplayName(DecoratedComponent) + ')',
enumerable: true
}, {
key: 'DecoratedComponent',
value: DecoratedComponent,
enumerable: true
}, {
key: 'contextTypes',
value: {
store: _react.PropTypes.shape({
subscribe: _react.PropTypes.func.isRequired,
dispatch: _react.PropTypes.func.isRequired,
getState: _react.PropTypes.func.isRequired
})
},
enumerable: true
}]);
return ReduxForm;
})(_react.Component);
};
}
module.exports = exports['default'];
exports['default'] = _reduxForm2['default'];
exports.createFormReducer = _createFormReducer2['default'];

8

package.json
{
"name": "redux-form",
"version": "0.0.1",
"description": "A decorator for forms using Redux and React",
"version": "0.0.2",
"description": "An ES7 decorator for forms using Redux and React",
"main": "./lib/index.js",

@@ -43,3 +43,7 @@ "repository": {

"webpack": "^1.10.5"
},
"dependencies": {
"react-redux": "^0.2.2",
"redux": "^1.0.0-rc"
}
}

136

README.md

@@ -1,7 +0,133 @@

react-redux
=========================
#redux-form
React bindings for Redux.
Docs are work in progress.
Requires React >= 0.13
`@reduxForm` is an ES7 decorator to for enabling a form in [React](https://github.com/facebook/react) to use [Redux](https://github.com/gaearon/redux) to store all of
its state.
## Installation
```
npm install --save redux-form
```
## Benefits
Why would anyone want to do this, you ask? React a perfectly good way of keeping state in each component! The reasons are twofold.
#### Hot Reloading
When used in conjunction with [React Hot Loader](https://github.com/gaearon/react-hot-loader), you can modify your components, rebuild your app and immediately see your changes ***without losing your form data***. This may seem trivial, but the minutes of refilling out forms in a develomnet environment really add up.
#### Stateless Components
By removing the state from your form components, you inherently make them easier to understand, test, and debug. The React philosophy is to always try to use `props` instead of `state` when possible.
## How it works
When you are adding your reducers to your redux store, add a new one with `createFormReducer(])`.
```javascript
import { createStore, combineReducers } from 'redux';
import { createFormReducer } from 'redux-form';
const reducers = {
// ... your other reducers here ...
createFormReducer('contacts', ['name', 'address', 'phone'], contactValidation)
}
const reducer = combineReducers(reducers);
const store = createStore(reducer);
```
Then, on your form component, add the `@reduxForm('contacts')` decorator.
```javascript
import React, {Component, PropTypes} from 'react';
import reduxForm from 'redux-form';
@reduxForm('contacts')
export default class ContactForm extends Component {
static propTypes = {
data: PropTypes.object.isRequired,
errors: PropTypes.object.isRequired,
handleChange: PropTypes.func.isRequired,
validate: PropTypes.func.isRequired,
reset: PropTypes.func.isRequired
}
render() {
const {
data: {name, address, phone},
errors: {name: nameError, address: addressError, phone: phoneError}
} = this.props;
return (
<form>
<label>Name</label>
<input type="text" value={name} onChange={handleChange('name')}/>
{nameError ? <div>{nameError}</div>}
<label>Address</label>
<input type="text" value={address} onChange={handleChange('address')}/>
{addressError ? <div>{addressError}</div>}
<label>Phone</label>
<input type="text" value={phone} onChange={handleChange('phone')}/>
{phoneError ? <div>{phoneError}</div>}
</form>
);
}
}
```
Notice that we're just using vanilla `<input>` elements there is no state in the `ContactForm` component. I have left handling `onSubmit` as an excercise for the reader. Hint: your data is in `this.props.data`.
## Validation
You will need to supply your own validation function, which is in the form `({}) => {}` and takes in all your data and spits out error messages. For example:
```javascript
function contactValidation(data) {
const errors = {};
if(!data.name) {
errors.name = 'Required';
}
if(data.address && data.address.length > 50) {
errors.address = 'Must be fewer than 50 characters';
}
if(!data.phone) {
errors.phone = 'Required';
} else if(!/\d{3}-\d{3}-\d{4}/.test(data.phone)) {
errors.phone = 'Phone must match the form "999-999-9999"'
}
return errors;
}
```
You get the idea.
## API
Each form has a `sliceName`. That's the key in the Redux store tree where the data will be mounted.
### createFormReducer(sliceName:string, fields:Array&lt;string&gt;, validate:Function)
##### -`sliceName` : string
> the name of your form and the key to where your form's state will be mounted in the Redux store
##### - fields : Array&lt;string&gt;
> a list of all your fields in your form.
##### - validation : Function
> your [validation function](#validation)
### @reduxForm(sliceName:string)
##### -`sliceName` : string
> the name of your form and the key to where your form's state will be mounted in the Redux store
## Running Example
Check out the [react-redux-universal-hot-example project](https://github.com/erikras/react-redux-universal-hot-example) to see `redux-form` in action.
This is an extremely young library, so the API may change. Comments and feedback welcome.
.idea/misc.xml

Sorry, the diff of this file is not supported yet

.idea/workspace.xml

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc