Create a twitch clone using React -3

Photo by Oskar Yildiz on Unsplash

Welcome to Part-3 of the series. You can find part-2 here.

We will start implementing forms in our project. We will use Redux-forms, but first let hook up redux-devtools in our project.

Redux Devtools is a chrome/firefox extension, which is extremely useful to debug Redux based project.

Head over to Redux Devtools Extension page here. You will find link for both Firefox and chrome webstore there. Go ahead and install it.

Next, you have to make some changes in root index.js file to use this extension. The changes are marked in bold.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import reducers from './reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, composeEnhancers(applyMiddleware()));

ReactDOM.render(
<Provider store={store}><App /></Provider>, document.querySelector('#root'));

Now, head over to localhost and open the Developer panel. There click on the Redux tab. If the setup went right, you will see something like below.

Redux Devtools

Next, we will start with adding Redux-form in our project. It is a third party library, which helps us to use forms in an efficient way in our project.

Open your terminal, stop the running instance of server and install

redux-form@8.1.0

You can read the rest of the article from my blog site. The link for the same is below -

The Web Dev

You can find part-4 here.