Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Course Overview: Manage React Form State with redux-form

    Rory SmithRory Smith

    In this course, we are going to use the redux-form package to create a form whose state is easy and enjoyable to manage.

    Using redux-form, we have a resource which provides not only the benefit of integrating form state with an existing Redux application, but also being able to track the state of our form with precision in Redux Dev Tools without writing lots of boilerplate code.

    Specifically, we are going to find out how redux-form ties into a React/Redux application, how to use validation both synchronous and asynchronous, applying real-world examples, effective ways of presenting important information to the user, and creating neat and reusable form components.

    Working with forms can be laborious, but redux-form takes out the tedium and replaces it with an enjoyable experience creating beautifully crafted forms.

    reactReact
    ^16.0.0
    reduxRedux
    ^3.0.0
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 In this course, I am going to show you how to use the fantastic Redux-Form library alongside React. Redux-Rorm provides you with out-of-the-box form state management that ties in with the Redux library.

    00:13 Using Redux-Form, we're going to create a registration form from start to finish. We'll go from no code at all to a fully functioning, practical form, which will be scalable, maintainable, and above all, a joy to work with. I am hoping my simple form will give you inspiration and ideas on how to use Redux-Form in your own form for your own needs.

    00:34 The Redux-Form library does a lot of the legwork for you. The state of your form is updated every time you interact with it. This means you can take very precise control over what your form does, without writing a lot of code.

    00:47 It's not essential that you know the ins and outs of Redux to watch this course. In fact, this course may be a good introduction to how Redux works, because the amount of Redux-specific code we're going to write is minimal.

    00:59 Yet, we're going to be able to use all the benefits of Redux, such as Redux Devtools which allows us to see how a form is updating as we update it. On the other hand, if you're already comfortable with using Redux, this course will provide you with the basis of adding and using a Redux-Form in an existing Redux project with ease.

    01:19 Either way, Redux-Form has a rich and sophisticated API and a multitude of amazing features, which are going to be really exciting to explore in this course.

    Discuss

    Discuss