Now, what we're going to do in this video is develop this form and all this. We're going to start with that at least.

What we want to do is go to our application and install Redux-Form, even if we don't use it in this video, we might have to use it in the next video. Let's install it now, let's say:

Terminal

npm install --save redux-form

Let's go ahead and I'm going to close this while that installs. I'm going to go to the bootstrap.js. We've got this all going on. Let's just throw in a route real quick for our sign up. So let's copy this route, put it here, and we'll say:

bootstrap.js

  ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
      <Router history={history}>
        <Layout>
          <Switch>
            <Route path='/' exact component={Signin}/>
            <Route path='/signin' exact component={Signin}/>
            <Route path='/signup' exact component={Signup}/>
          </Switch>
        </Layout>
      </Router>
    </Provider>
    , document.querySelector('.app-wrapper'));
}

Now, later on, this is just going to go straight to the shop, so we'll leave that there. Let's go test these and see if they're working. Go to localhost:3000/signin. I works that same. Now, let's go to sign up. You'll see it takes us to sign up.

Let's go back to our code and let's open up the terminal and you'll see that Redux-Form installed. If it didn't, just make sure that you get it installed. I'm going to close out of that again, and I'm just going to close out of all these files.

Let's go ahead and go into our signin.js and we'll start doing something here. We've messed around with Redux-Form quite a bit in the last videos, in the property management application. The one before the last app, the fourth app. We're going to be doing that again. So let's import it. Let's say:

signin.js

import { reduxForm } from 'redux-form';

Now, let's decorate this, so down here let's say:

signin.js

SignIn = reduxForm({
    form: 'SignIn'
})(SignIn);

Now what we want to do is import a couple more things. We want to import Field.

signin.js

import { reduxForm, Field } from 'redux-form';

Now, let's just go verify that this is working. There could be an error somewhere. We could have installed something wrong. It looks like it's working. Now, this is pretty important you pay attention at this exact moment because we're using Redux-Form. Realize that this isn't just any other form.

We're using Redux-Form so we can have access to this data throughout our app, and mostly so we can see it in our Devtools. Well, not mostly, but that's one of the benefits. The real benefits are submitting the form. It just handles all the fields for us, which is nice, and validation.

Redux-Form is great for validation, and we're going to be doing that in this application. We might do it in this video. Let's go into Chrome and let's open up the body tag. Let's open up the div, it's in layout, and we have our signin. That's our form right there.

Now, if you open up Redux Devtools, make sure you have those installed, you'll notice that we just have state. We don't really have our form. It's crucial that we get that taken care of now because if we try to add in any fields, we're not going to be able to type in them.

Let's go into our application and let's go into our index.js in our reducers directory. Let's replace the state variable function. Let's replace it with an import, so let's say:

index.js

import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form'; 

const rootReducer = combineReducers({
  form
});

export default rootReducer;

The reason we're calling it a form is because we don't want to say Reducer because that's pretty vague. Let's go into Chrome, let's go back to our dev tools, and let's just reload the page. It looks like nothing's happening. It looks like we still have this problem. Let me see.

Let's try this one more time. So the problem is we haven't included Redux Devtools into our application. We've done this, so let's go into bootstrap.js, and let's include those Devtools. You'll see that applyMiddleware call. We don't have anything and we want to we don't even want to put thunk in yet.

What we want to do is put in the Devtools extension so we have the import and we're going to have to import another thing from Redux. That is called compose. Now, what I recommend you do is just open up open up the property management app, unless that's going to be too much of a hassle right.

You don't have to. You can just follow along as I type it, but if you want to open it up, you'll see the code that we need to add in here. We still won't create store, but we want to compose two functions together.

We have createStore and then we have our Devtools. What we want to do is get rid of createStore, and let's say compose. In this compose function, we want to pass in 2 arguments. We want to pass in two sets of parentheses. In the last set, we want to say:

bootstrap.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import { Router, Switch, Route } from 'react-router-dom';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(compose((window.devToolsExtension ? window.devToolsExtension() : f => f)(createStore)));

That should be good. Write out this line. If you're having trouble doing that, reference the property management app we built, it should be in there. Actually, it should be in all the apps we've done, except for the first two. Go ahead and reference those.

Clearly, it took me a second to remember this, so don't feel bad if you don't remember it. It's pretty common in development to forget a few things. I'm going to go into sign.js and look at this. It looks pretty nice to me.

I'm going to go back to Chrome and it should be there. You'll see now that we have our form. We have state, and we have our form. Obviously, our form is empty because we clearly have no fields whatsoever. Let's go ahead and add those in here in the next video.

Let's get some fields in here and be moving on. Let's open up our terminal and commit our code:

Terminal

git status
git add .
git commit -m "setup reduxform"

I'll see you in the next video.

Resources

• Source Code