So to get started head over to the searchBar.js component and import redux form so import [ field, reduxForm ] from 'redux-form'. And at the bottom here we just have to say searchBar = reduxForm and then pass in the configuration options so we need to give it a unique form value and let's call it searchBar. Now what we want to do is put up an extra set of parentheses down here and put search bar in here so we can use this effectively.

searchBar.js

import React, { Component } from 'react';
import [ Field, reduxForm ] from 'redux-form';

class SearchBar extends Component {
  render() {
    return (
      <form>
        <input placeholder="Search DailySmarty"/>
      </form>
    )
  }
}

SearchBar = reduxForm({
  form: 'searchBar'
})(SearchBar);

export default SearchBar;

Now this is really similar to how we used connect except for we are writing it up here because we have to pass in these configuration options. If I were to delete this set of configuration options. This is basically like saying this

searchBar =

export default reduxForm()(SearchBar);;

so very similar to how we used connect but we want to do it this way.

SearchBar = reduxForm({
  form: 'searchBar'
})(SearchBar);

export default SearchBar;

So I'm going to say form searchBar and attach it to SearchBar. Okay, we're set up with redux form now we need to utilize the field component. So basically the field component just allows us to map our fields to our our form and ultimately map it to our store so redux. So we need to write out a call to a function like a property.

So let's say constant and lets say handle submit and these are just our redux form properties so const { handleSubmit } = this.props;. Now next thing we want to do is write out our field. So what we need to do is get our inputs we need to say render input and then pass in a field so we can provide our field with what we want. In this case we need an input of type text and placeholder of for now Search DailySmarty later on we'll add in font awesome there and then that should be it.

searchBar.js

import React, { Component } from 'react';
import [ Field, reduxForm ] from 'redux-form';

class SearchBar extends Component {

  renderInput(field) {
    return <input type="text" placeholder="Search DailySmarty"/>
  }

  render() {

    const { handleSubmit } = this.props;

    return (
      <form>
        <input placeholder="Search DailySmarty"/>
      </form>
    )
  }
}

SearchBar = reduxForm({
  form: 'searchBar'
})(SearchBar);

export default SearchBar;

Now what we need to do is map our field inputs over, so we just need to say dot dot dot field dot input. We need to map over our properties of that input. So we need to replace this input with a field component and then in this field component we need to give it a name of query so we can specifically use a query like rails for example in the search. Like if I go to the app here and I type in rails this is going to be our query value which we want to hit the server with. So let's head back here and fill this out.

<Field name="query" component={this.renderInput}. Now I went over redux form in the last app, we used regex from quite a bit. But I'm not going to go to go through it too fast in this guide, because you probably don't fully understand it yet but that's okay just follow along.

What we want to do now is give it a. Let's see, that should be it for the field.

searchBar.js

import React, { Component } from 'react';
import [ Field, reduxForm ] from 'redux-form';

class SearchBar extends Component {

  renderInput(field) {
    return <input type="text" placeholder="Search DailySmarty"/>
  }

  render() {

    const { handleSubmit } = this.props;

    return (
      <form>
        <Field name="query" component={this.renderInput}/>
      </form>
    )
  }
}

SearchBar = reduxForm({
  form: 'searchBar'
})(SearchBar);

export default SearchBar;

Now let's see if this is all rendering in the browser let's head over to the browser and go over to our app here and it looks like we have an error, or it's not loading for some reason and it says search bar is not defined. So that's because we called search bar right here on line 23 with a lowercase s. Let's just give it a capital S and go back to the localhost and now it should work.

Okay so we have our input but nothing really changed. We can't even type into it though and that's because we've set it up with redux form the way we can fix this is by heading over to our reducers here and in our index.js simply getting rid of this state function and then importing here import { Form } from 'redux-form' now what we need to do is just simply say form. Well what we need to do here is say important { reducer as form } from 'redux-form';.

index.js

import { combineReducers } from 'redux';

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

const rootReducer = combineReducers({
  Form
});

export default rootReducer;

The reason why I'm calling form is because this is pretty vague it just says reducer. We want to name something specific like form so we can use as an there using es6 to call it something else. So now we should be able to type into it, let's go into our app here and type it looks like we can type.

And when we hit enter you can see up here it says queries=asdadf

or whatever we type in here, which is really awesome because now we can use this in redux and we can use it to hit the API and get something back. So what we need to do is actually provide a submit function so we can handle that data. So let's go ahead and type that out in our search bar.

We need to call it something else we need to call it handleFormSubmit like we did in the last app let's get a function and then pass in an object with query, this will allow us to access all of our form attributes in this case. We only have one which is query if you remember we did this in the last app where we used something like a title and an ID, or something, a title and a body and an image.

So in this guide we're just going to be dealing with a query because thats all we need to pass. And here we can call in action which we will then use redux thunk to use to make an API request to that API. So for now let's just console log it. I'll say console.log('trying to handle submit for query',query); this will print out our query.

Now we have no way of accessing this function yet, but it's pretty simple all we have to do is say OK on the form, onSubmit we just need to say, first I'm going to put a class name of search-bar and then now we just have to say onSubmit is equal to in curly braces handleSubmit. So it's going to be able to handle submit and then we need a pass in our function which is this.handleFormSubmit and then all we need to do is bind it. So we did this.handleFormSubmit.bind. That way it is bound and we are going to go.

searchBar.js

class SearchBar extends Component {

  handleFormSubmit = function({query}) {
    console.log('trying to handle subimit for query', query);
  }

  renderInput(field) {
    return <input type="text" placeholder="Search DailySmarty" {...field.input} />
  }

  render() {

    const { handleSubmit } = this.props;

    return (
      <form className="search-bar" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}
        <Field name="query" component={this.renderInput}/>
      </form>
    )
  }
}

SearchBar = reduxForm({
  form: 'searchBar'
})(SearchBar);

It should be working, we should get this when we hit return type something in and let's hit return you should see it in the console. Trying to handle submit for query rails is trying to handle submit for query rails, or Swift program.

So if you remember how the react router works, what we want to do is not just handle the submit we want to actually navigate to a different page. So in this application if I go to the home and then search rails, it takes us to results. Much like if you go to Instagram.com and then I go to /maxcodes or something and it will take me to my Instagram profile.

So go mess around on a website like Instagram or something and kind of look at the URL's and see how they are changing that should give you a good idea of how this is working. So exit out of that and I will head back to the application here. And that's what we need to do, we need to have this handle it and then we need to navigate to a new route.

So let's go ahead and commit our code, so I'll say git status, git add ., git commit -m and say "set up redux forum in searchbar.js" and then in the next guide we will get into the routes and we'll develop our home route and our results route. And then what we can do after that is use those routes, we can say okay if we click on a logo we can go home and whenever we hit enter on this we will navigate to the results route. So that's what we'll handle on the next guide, I will see you then.

Resources

Source code