Implementing the Course Content Action with Redux

So I've provided all the code for this I've basically provided the entire action with all of the course objects in there, in the guide notes in the last guide. So go and copy that and then come back here and paste it into the index.js of our actions just replace the entire function and get rid of that comment we don't need that.

export 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.',
                enrolled: false,
                open: false
            },
            {
                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.',
                enrolled: false,
                open: false
            },
            {
                title: 'Problem Solving',
                description: 'In this course you\'ll take a practical look at how to build a large number of software applications and features. By taking a systems analysis and design approach to development and leveraging UML, you\'ll be able to model systems and prepare to build the projects.',
                enrolled: false,
                open: false
            },
            {
                title: 'Algorithm Bootcamp',
                description: 'In this in depth course you will learn how to work with algorithms, including: how to measure their performance, understanding data structures, and implementing all of the algorithms in code.',
                enrolled: false,
                open: false
            },

            {
                title: 'HTML/CSS Bootcamp',
                description: 'Learn HTML5 and CSS3 from scratch, starting with the basics and finishing by building five projects from scratch.',
                enrolled: false,
                open: false
            },
            {
                title: 'UML for Developers',
                description: 'This course teaches the foundational building blocks of utilizing UML in order to model software systems.',
                enrolled: false,
                open: false
            },
            {
                title: 'Introduction to Programming with Python',
                description: 'This course teaches the fundamentals of programming and utilizes the Python programming language.',
                enrolled: false,
                open: false
            },
            {
                title: 'TypeScript Development',
                description: 'This course gives an introduction to the TypeScript programming language, including walking through the: syntax, best practices, and practical systems for building TypeScript programs.',
                enrolled: false,
                open: false
            },
            {
                title: 'Introduction to Javascript',
                description: 'This course gives an introduction to the JavaScript programming language, including the basic syntax, how to work with collections, and input/output.',
                enrolled: false,
                open: false
            },
            {
                title: 'Dissecting Rails 5',
                description: 'Learn how to build powerful applications using this comprehensive guide to the Ruby on Rails web framework.',
                enrolled: false,
                open: false
            }


        ]
    }
}

Now what we want to do is we want to look at our map here and you'll notice that it's displaying all these empty slots

large

and that's because we are mapping over all of our courses into our schedule.js here. So it's calling render course however many times we have courses so what we need to do is in the next guide, I want to separate it from this one just because it's kind of a lot of logic to take in and we don't want to throw that all on this video.

So in the next guide we will handle that and we'll get started with that maybe separate it into a couple of guides depending on how complex it gets. But now that we've got that logic in here and we kind of see the problem of the courses appearing where each course is here on the left but on the right we can approach it now with an understanding of why this is a problem and why we need to introduce more logic into our application.

So let's commit our code. git status, git add ., git commit -m "added remaining course object content into app", git push origin master and let's get into the logic of that. I will see you in the next guide.