https://github.com/davidkpiano/rrf-docs
https://github.com/davidkpiano/rrf-docs
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/davidkpiano/rrf-docs
- Owner: davidkpiano
- Created: 2016-04-25T13:50:32.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-05-29T21:36:52.000Z (almost 9 years ago)
- Last Synced: 2025-02-04T17:21:01.109Z (4 months ago)
- Language: CSS
- Size: 79.1 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
react redux form
React Redux Form is **a collection of action creators and reducer creators** that makes building complex and custom forms with React and Redux simple.
**If you know React and Redux, you know React-Redux-Form.**
It also provides the helpful `` component for mapping controls to form and model changes quickly.
Instead of answering "How would I do this with this library?", React Redux Form answers "How would I do this in Redux?", and provides a thin layer to help abstract the pain points of creating complex, dynamic forms with Redux and React.
```js
import { Field } from 'react-redux-form';
// in your component's render() method
```
React Redux Form:
- handles model value changes for _any_ object/array
- provides utility actions for manipulating state
- handles control updates, such as focus, blur, pristine, etc.
- keeps track of validity on _any part_ of your model
- allows for completely dynamic and deep forms
- **keeps your model state intact**, which allows you to have full control of your model reducer
Useful Components:
- [``](https://davidkpiano.gitbooks.io/react-redux-form/content/form_component.html)
- [``](https://davidkpiano.gitbooks.io/react-redux-form/content/field_component.html)
- [``](https://davidkpiano.gitbooks.io/react-redux-form/content/errors_component.html)
**Getting Started**
1. Install the prerequisites:
- `npm install react redux react-redux --save`
- (recommended) `npm install redux-thunk --save`
1. `npm install react-redux-form --save`
**Full Example**
```js
// app.js
import React from 'react';
import { combineReducers, createStore } from 'redux';
import { Provider } from 'react-redux';
import { modelReducer, formReducer } from 'react-redux-form';
import LoginForm from './forms/login-form';
const store = createStore(combineReducers({
user: modelReducer('user'),
userForm: formReducer('user')
}));
export default class App extends React.Component {
render() {
return (
)
}
}
```
```js
// forms/login-form.js
import React from 'react';
import { connect } from 'react-redux';
import { Field } from 'react-redux-form';
class LoginForm extends React.Component {
render() {
let { user } = this.props;
return (
Username
Password
Log in as { user.username }
)
}
}
const selector = (state) => ({ user: state.user });
export default connect(selector)(LoginForm);
```