study redux

src/components/study/myCourses/actions.js

@@ -12,8 +12,8 @@ const PAGE_INTERVAL = 1
 export const NUM_INTERVAL = 10
 export const fetchCoursesListIfNeeded = () => (dispatch, getState) => {
     const myCourses = getState().myCourses
-    const {shouldFetch, page} = myCourses
-    if (shouldFetch) {
+    const {switchTab, page} = myCourses
+    if (!switchTab) {
         dispatch(getMyCourses({
             page: page + PAGE_INTERVAL,
             num: NUM_INTERVAL
@@ -32,16 +32,16 @@ export const getMyCourses = payload => dispatch => {
                 page: payload.page,
                 num: payload.num
             }))
-            dispatch(invalidateCourseDate())
         })
 }
 
-export const INVALIDATE_COURSEDATA = 'INVALIDATE_COURSEDATA'
-export const invalidateCourseDate = () => ({
-    type: INVALIDATE_COURSEDATA
+export const SWITCH_TAB = 'SWITCH_TAB'
+export const switchTab = payload => ({
+    type: SWITCH_TAB,
+    payload
 })
 
-export const VALIDATE_COURSEDATA = 'VALIDATE_COURSEDATA'
-export const validateCourseData = () => ({
-    type: VALIDATE_COURSEDATA
+export const NOMORE_COURSE = 'NOMORE_COURSES'
+export const nomoreCourse = () => ({
+    type: NOMORE_COURSE
 })
\ No newline at end of file

src/components/study/myCourses/index.js

@@ -3,9 +3,9 @@ import { VList } from '@/common'
 import './my-courses.scss'
 import { isToday, format } from "date-fns"
 import { connect } from "react-redux"
-import { fetchCoursesListIfNeeded, validateCourseData } from "./actions"
+import { fetchCoursesListIfNeeded, switchTab } from "./actions"
 import InfiniteScroll from 'react-infinite-scroller'
-import {debounce} from 'lodash'
+import { debounce } from 'lodash'
 
 
 function getStudyTime(seconds) {
@@ -78,16 +78,22 @@ class MyCourses extends PureComponent {
     }
 
     componentDidMount() {
+        console.log('did mount')
+        this.props.switchTab(false)
         this.props.fetchCoursesListIfNeeded();
     }
 
+    componentWillUnmount(){
+        console.log('will unmount')
+        this.props.switchTab(true);
+    }
+
     componentDidUpdate() {
         console.log('updated')
     }
 
     loadFunc = debounce(() => {
-        if(this.props.courseList.length % 10 === 0){
-            this.props.validateCourseData();
+        if (this.props.courseList.length % 10 === 0) {
             this.props.fetchCoursesListIfNeeded();
         }
     }, 200)
@@ -153,7 +159,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = {
     fetchCoursesListIfNeeded,
-    validateCourseData
+    switchTab
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(MyCourses)
\ No newline at end of file

src/components/study/myCourses/reducers.js

 import {
     RECEIVE_MY_COURSES,
-    INVALIDATE_COURSEDATA,
-    VALIDATE_COURSEDATA
+    SWITCH_TAB,
+    NOMORE_COURSE
 } from './actions'
 
 const initialState = {
-    shouldFetch: true,
+    switchTab: false,
     courseList: [],
     page: 0,
     statusCode: 0,
     msg: '',
-    noMore: false
+    noMore: false,
 }
 
 
@@ -19,10 +19,9 @@ export default function myCourses(state = initialState, action) {
         case RECEIVE_MY_COURSES:
             let {courseList, ...rest} = action.payload
             return {...state, ...rest, courseList: state.courseList.concat(courseList)}
-        case INVALIDATE_COURSEDATA:
-            return {...state, shouldFetch: false}
-        case VALIDATE_COURSEDATA:
-            return {...state, shouldFetch: true}
+        case SWITCH_TAB:
+            return {...state, switchTab: action.payload}
+        case NOMORE_COURSE:
         default:
             return state
     }