Welcome back to the course. In this video, we are going to implement the Redux dev tools extension so you can use them in your application.

This is only going to work using Chrome, so if you're using something besides Chrome, something like Firefox, you'll need to find a different way to work this out. I'm doing it with Chrome extension. So in the Chrome web store, you just need to search Redux Dev tools, or you can also just Google it.

Here's what it should look like:

It's offered by remotedev.io. Go ahead and click on Add to Chrome. Now we're going to have to add some code to be able to use it. If we go to our application in the browser, to see the tools all we have to do is right click and select Redux Devtools. If it doesn't show up, you may have to restart Chrome for it to refresh.

Even if we open the DevTools right now, we won't see anything since we haven't connected it up with our app. So let's go into our code to connect it.

Open up the code, and open the file bootstrap.js. We're going to import another function from redux and connect to our extension, so lets change that now.

bootstrap.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';

import Home from './components/home';
import reducers from './reducers';

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

import 'bootstrap/dist/css/bootstrap.css';
import './style/main.scss';

function main() {
  ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
      <Home />
    </Provider>
    , document.querySelector('.app-wrapper'));
}

document.addEventListener('DOMContentLoaded', main);

Make sure your file has these same changes.

Now if we pull up our DevTools window, it should have changed. You'll see that we know have state and courses in it, but they both register as empty.

This is because we haven't done anything with state. Let's get our information put in. You can see that in reducers/index.js we have it calling courses, which is why it's showing up in the DevTools. However, in coursesReducer.js, we can see that it's returning nothing inside of state, which is why it's showing up as empty.

What we can do is instead of logging it to the console, we can return a spread operator, which if you don't understand how a spread operator works, you should Google it since it is a JavaScript operator, and if you can understand how it works, how reducers work is going to make more sense.

So, we'll spread state, then we'll tell it to overwrite payload. Then we will spread out action.payload as well. Our code should look like this:

coursesReducer.js

import { FETCH_COURSES } from '../actions/types';

export default function(state = [], action) {
    switch (action.type) {
        case FETCH_COURSES:
            return [
                ...state,
                ...action.payload
            ]
        default:
            return state;
    }
}

And you can see that our code shows up in the DevTools window.

With the spread operator, we can see that it does what it's supposed to by spreading out our information, instead of having it lumped together in one object. I definitely recommend you pause the video to go and look up the spread operator, because if you don't understand how it works or what it can do, then trying to understand how our data gets into our store will be confusing.

Now that we have it working, and have our DevTools installed I'm going to end this video. In the next video we will go over how we can use the tools we have now to have the data show in our application, instead of the filler data that we currently have.

Let's commit our code.

git status
git add .
git commit -m "installed and connected redux devtools to application and used spread operator to set payload data in store"
git push

See you in the next video.

Resources

Code at this stage