Creating Lecture Slice

Creating lecture slice#

We have finished working on the lectures backend. We can now start working on the client side. Let's start with the lecture model. The lecture we're returning will have courseName of type string; we have some sections which will be an array of SectionDto. We also need currentLecture of type number. Now let's write the SectionDto; this will have sectionName of type string and lectures which will be an array of LectureDto. LectureDto will have an id of type number, title of type string and url of type string. We can now use this model inside our lecture slice.

client/src/models/lecture.ts

xxxxxxxxxx

export interface Lecture {

  courseName: string;

  sections: SectionDto[];

  currentLecture: number;

}

​

export interface SectionDto {

  sectionName: string;

  lectures: LectureDto[];

}

​

export interface LectureDto {

  id: number;

  title: string;

  url: string;

}

Inside redux slice, let's create our lectureSlice. First of all, we need lectureAdapter which will be equal to createEntityAdapter of type Lecture. Now let's write the LecturState which will have lecture of type Lecture; it can also be null. We also want currentLecture property which will be a number, and we want currentvideo property which will be of type string. This property will contain the url of the video. We need lecturesLoaded property of type boolean.

Now let's create lecture slice which will be equal to createSlice; name will be lecture, initialState will be lecturesAdapter.getInitialState of type LectureState, the default value of lecture will be null, lectureloaded will be false, currentLecture can be zero because it's a number, currentVideo can be an empty string too. Inside reducers, we need setCurrentLecture function where state.currentLecture will be action.payload. Let's copy it one more time for setCurrentVideo.

We can now write our async thunk functions. Let's start with getLecturesAsync which will be equal to createAsynThumk; we will return Lecture or undefined from this api call and as a parameter, we will pass courseId of type string. We can call this, lecture/getLecturesAsync. Now we can write our async function. We will pass courseId as a parameter and also pass thunkApi. Let's write our try catch block now. Inside the catch block, we can return thunkAPI.rejectWithValue with the error. Inside try block, we can return await agent.Lectures.getLectures and pass courseId as a parameter.