study redux

src/components/study/myCourses/actions.js

 import { api } from '@/utils'
 
+
 export const RECEIVE_MY_COURSES = 'RECEIVE_MY_COURSES'
 export const receiveMyCourses = payload => ({
     type: RECEIVE_MY_COURSES,
@@ -14,6 +15,18 @@ export const getMyCourses = payload => dispatch => {
         })
 }
 
-const fetchCoursesListIfNeeded = payload => {
 
+const NUM_INTERVAL = 10
+export const fetchCoursesListIfNeeded = payload => (dispatch, getState) => {
+    const {shouldFetch, currentPage, currentNum} = getState().myCourses
+    if(!shouldFetch){
+        dispatch(getMyCourses)
+    }
 }
+
+
+export const INVALIDATE_COURSEDATA = 'INVALIDATE_COURSEDATA'
+export const invalidateCourseDate = () => ({
+    type: INVALIDATE_COURSEDATA
+})
+

src/components/study/myCourses/index.js

 import React, { PureComponent } from "react"
-import { VList } from '../../../common'
+import { VList } from '@/common'
 import './my-courses.scss'
-import { api } from '@/utils'
 import { isToday, format } from "date-fns"
 import { connect } from "react-redux"
 import { getMyCourses } from "./actions"
 
-
-const mockData = [
-    {
-        title: '三月面试求职班',
-        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-        contact: 'QQ群：449141326',
-        time: '03月12日',
-        record: '学习到第2课2分33秒'
-    },
-    {
-        title: '三月面试求职班',
-        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-        contact: 'QQ群：449141326',
-        time: '03月12日',
-        record: '学习到第2课2分33秒'
-    },
-    {
-        title: '三月面试求职班',
-        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-        contact: 'QQ群：449141326',
-        time: '03月12日',
-        record: '学习到第2课2分33秒'
-    },
-    {
-        title: '三月面试求职班',
-        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-        contact: 'QQ群：449141326',
-        time: '03月12日',
-        record: '学习到第2课2分33秒'
-    },
-    {
-        title: '三月面试求职班',
-        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-        contact: 'QQ群：449141326',
-        time: '03月12日',
-        record: '学习到第2课2分33秒'
-    },
-]
-
-
 function getStudyTime(seconds) {
     return {
         hour: Math.floor(seconds / (60 * 60)),
@@ -93,7 +52,7 @@ function Record({record: {seconds, lesson_name}}) {
 class MyCourses extends PureComponent {
 
     state = {
-        courseList: this.props.courseList.data
+        addVisible: false
     }
 
     handleClick = () => {
@@ -104,23 +63,11 @@ class MyCourses extends PureComponent {
     }
 
     componentDidMount() {
-        console.log(this.props.courseList)
-        /*api.get('/m/my_course/1/10')
-            .then(res => {
-                if (res.data.code == 200) {
-                    this.setState({
-                        courseList: res.data.data
-                    });
-                } else {
-                    console.log(res.data.msg)
-                }
-            })*/
         this.props.getMyCourses({page: 1, num: 10});
     }
 
     render() {
-        let { data } = this.props.courseList
-        console.log(data)
+        let {data} = this.props.courseData
         if (data && data.length !== 0) {
             return (
                 <>
@@ -144,19 +91,24 @@ class MyCourses extends PureComponent {
                                 return (
                                     <VList img={item.image_name}
                                            handleClick={this.handleClick}
-                                           {...item} key={index}
+                                           {...item}
+                                           key={index}
                                            info={Info}/>
                                 )
                             })
                         }
                     </ul>
+                    {
+                        this.state.addVisible ?
                             <AddCourse addCourseClick={this.addCourseClick}/>
+                            : null
+                    }
                 </>
             )
         } else {
             return (
                 <div className="empty">
-                    <p><i className='iconfont iconfish'></i></p>
+                    <p><i className='iconfont iconfish'/></p>
                     <p className='empty-prompt'>还是咸鱼一条，快去翻身~</p>
                     <p>
                         <button>去选课</button>
@@ -169,9 +121,9 @@ class MyCourses extends PureComponent {
 }
 
 const mapStateToProps = state => ({
-    courseList: state.myCourses.courseList
+    courseData: state.myCourses.courseData
 })
 
 const mapDispatchToProps = {getMyCourses}
 
-export default connect(mapStateToProps,mapDispatchToProps)(MyCourses)
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(MyCourses)
\ No newline at end of file

src/components/study/myCourses/my-courses.scss

 .info {
     display: flex;
-    //flex-flow: column wrap;
-    //justify-content: space-between;
     flex-wrap: wrap;
     width: 55%;
 
@@ -56,6 +54,7 @@
     align-items: center;
     padding-top: 140px;
     background: $bg_f5f5f5;
+
     .iconfish {
         width: 20px;
         height: 20px;
@@ -67,11 +66,12 @@
         font-size: $font_12;
         color: $color_666;
     }
-    button{
-        width:131px;
-        height:30px;
-        border:1px solid $active;
-        border-radius:15px;
+
+    button {
+        width: 131px;
+        height: 30px;
+        border: 1px solid $active;
+        border-radius: 15px;
         background: transparent;
         color: $active;
         font-size: $font_16;

src/components/study/myCourses/reducers.js

-import {RECEIVE_MY_COURSES} from './actions'
+import {
+    RECEIVE_MY_COURSES,
+    INVALIDATE_COURSEDATA
+} from './actions'
 
 const initialState = {
-    isValid: false,
-    courseList: []
+    shouldFetch: false,
+    courseData: {},
+    currentPage: 1,
+    currentNum: 10
 }
 
 
 export default function myCourses(state = initialState, action) {
     switch (action.type) {
         case RECEIVE_MY_COURSES:
-            return Object.assign({}, state, {courseList: action.payload})
+            return Object.assign(
+                {},
+                state,
+                {courseData: action.payload})
+        case INVALIDATE_COURSEDATA:
+            return Object.assign(
+                {},
+                state,
+                {shouldFetch: true})
         default:
             return state
     }

src/components/study/study.scss

@@ -10,6 +10,7 @@ $tabFontSize: 15px;
 
     .tab {
         height: $tabHeight;
+        max-height: $tabHeight;
         line-height: $tabHeight;
         text-align: center;
         background: #F7F9FC;