https://github.com/arojunior/react-redux-form

React app using redux-form for controlled components
https://github.com/arojunior/react-redux-form

javascript react redux redux-form

Last synced: 16 days ago
JSON representation

React app using redux-form for controlled components

• Host: GitHub
• URL: https://github.com/arojunior/react-redux-form
• Owner: arojunior
• Created: 2017-01-12T16:30:30.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-08-29T12:24:47.000Z (over 7 years ago)
• Last Synced: 2024-11-07T13:53:18.723Z (2 months ago)
• Topics: javascript, react, redux, redux-form
• Language: JavaScript
• Homepage:
• Size: 87.9 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-redux-form

Just a simple example to show how to use controlled components with redux-form.

# modules/index.js

```javascript

/*

* Redux

*/

import {createStore, combineReducers} from 'redux'

import {reducer as formReducer} from 'redux-form'

/*

* Reducers

*/

import Contact from './Contact'

const combineReducer = combineReducers({

  form: formReducer,

  Contact

})

/*

* Store

*/

export const store = createStore(combineReducer)

```

It´s just redux basic configuration...

# components/Form.js

```javascript

const Form = props => {

  const {handleSubmit, pristine, reset, submitting} = props

  return (

    

      


        Name

        

      

      


        E-mail

        

      

      


        Message

        

      

      


        

          Send

        {' '}

        

          Reset

        

      

    

  )

}


// Connect Form component and Form reducer

export default reduxForm({

  form: 'contactForm'

})(Form)

```

# Container

```javascript

class Contact extends Component {

  handleSubmit = (values, dispatch) => {

    dispatch(contactSent(values))

    dispatch(reset('contactForm'))

  }

  render() {

    const {data} = this.props

    return (

      


        


          


            
Contact

          

          

          
Form data: {data ? JSON.stringify(data) : null}

        

      

    )

  }

}


export default connect(state => state.Contact)(Contact)

```

That's it!

[Redux-form documentation](http://redux-form.com/)

[Article in portuguese](https://medium.com/@arojunior/componentes-controlados-com-react-e-redux-form-e58df1581b62)