Great job finishing up that last section. It was the first of three sections for this application, focusing on the grid setup, including SCSS styles and jsx components.

This section will cover Redux in React and making our app fully functional, and the final section will cover in-depth styling and animations if we don't cover it in this section.

First off, let's close out of all of our open files. Now let's talk a little about what we're going to do. Since this is probably your first time with Redux, I'll go over it slowly to make sure you understand it.

We'll go ahead and Google redux in react, and we'll click on the redux.js.org (link below). This is a great website for learning Redux on your own, however, the way that they teach it to you is a little different from the way that I'm going to teach you. I'm going to teach it in an introductory way in regards to Redux and React, which should work out well for this course.

Here is a basic explanation on what Redux is from the website:

That's it! They make it sound super simple right? Now, this definitely doesn't sound like English to those that haven't been programming for a while now, so I'm going to explain it a little better.

We have these things called actions, and they simply are pieces of text that contain a payload or data. The actions are then dispatched to things called reducers. Reducers will take the data from the actions and insert it into our code. The data itself is contained inside of the store.

This still might be hard to understand, but we will learn more as we build out the application, since there's really no better way than to learn as build it out with Redux.

So let's think about what we need to do. Right now we have these course objects with titles and descriptions, but if we look at our design we have more objects that are individually unique. Theoretically we would have a server that we would be pulling this course data from, but we're not going to be building that out. Instead we're going to just hard-code in that data so we can learn Redux concepts.

Now that's not what we would do if we were building this out for a university. For that we would have to build out a back-end so that they could make changes, but let's keep it simple so we aren't trying to learn api requests in redux.

So let's put in our information for classes. Now we want to provide an action that contains this data. Let's open up the actions directory and open up index.js, this is where we'll put everything. We're also going to create a new file named types.js. Inside of types.js we're going to build an export for fetching.

types.js

export const FETCH_COURSES = 'FETCH_COURSES';

Now we want to import it in index.js.

index.js

import { FETCH_COURSES } from './types';

Now we need to build a function to dispatch from here. We also need it to return some information, so we'll specify a type, and payload as an array of objects.

index.js

import { FETCH_COURSES } from './types';

function fetchCourses() {
  return {
    type: FETCH_COURSES,
    payload: [
      {

      }
    ]
  }
}

Now we're going to input our course information. I'm only going to put a couple in for now and then move on. We'll get to the rest in a future guide.

index.js

import { FETCH_COURSES } from './types';

function fetchCourses() {
  return {
    type: FETCH_COURSES,
    payload: [
      {
        title: "Up and Running with Redis",
        description: "In this course you'll learn how to work with the efficient Redis database to manage key / value relationships."
      },
      {
        title: "HTML/CSS Bootcamp",
        description: "Learn HTML5 and CSS3 from scratch, starting with the basics and finishing by building five projects from scratch."
      },
      {
          title: "UX for Developers",
          description: "This User Experience (UX) course examines how to develop a system for approaching application development and enhancing the experience for users."
      }
    ]
  }
}

And that's all that I'm putting in for this video.

So, now that we've built an action, we need to figure out how we're going to get the data from here, into our library component. Once we have that data, we can then render some courses.

Now this still probably feels pretty foreign right now, but I promise that as we go along, it will all click.

Let's commit our code, and then we'll continue on to the next video where we'll build a reducer.

git status
git add .
git commit -m "built first action creator"

Resources

Code at this stage

Redux site