App Setup

Let’s create a new React app using create-react-app . I will name my app as form .

$ create-react-app form

$ cd form

Now, let’s install a couple of dependencies to this project. I need redux for state management, react-redux to link Redux with React, and redux-form to handle the forms that I am going to create in this app.

yarn add redux react-redux redux-form

Next, open the app directory in a code editor (I love VS Code) and delete all the files inside src folder except the index.js file. We are going to write our own files.

Create a new folder inside src and name it as App . Inside create a new file called index.js with the following code:

Go to src/index.js and remove the reference for the files we just deleted. Then, import the Provider component from react-redux and createStore and combineReducers functions from redux . I also need to import the reducer from redux-form . But, to avoid any conflicts, I’ll do it by renaming it as formReducer .

import {Provider} from 'react-redux';

import {createStore, combineReducers} from 'redux';

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

I now need to specify that formReducer is one of the app’s reducer functions.

const reducers = {form: formReducer};

In a real world app, you will have more than just one reducer. You will have to specify them all here inside the reducers object. After specifying the reducers, we need to combine them all into a single reducer using the combineReducers function like this:

const reducer = combineReducers(reducers);

Finally, we will set up our redux store using the createStore function. I will pass in the reducer as an argument to this function.

let store = createStore(reducer);

Even if you have a single reducer in you entire app, you will still have to do these things.

Only one more thing left to do here. Wrap the App component with the Provider component inside the ReactDOM ‘s render function. Provider helps us pass the store into our App component.