study redux

src/HOCs/WithFullSize/index.js

-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 export default function (WrappedComponent) {
-    return class extends Component {
+    return class extends PureComponent {
         componentDidMount() {
             const height = window.innerHeight
             document.body.style.height = `${height}px`

src/HOCs/WithTab/index.js

-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import NavBar from '@/common/NavBar'
 
 export default function WithTab(WrappedComponent) {
-    return class extends Component {
+    return class extends PureComponent {
         render() {
             return (
                 <>

src/components/study/index.js

@@ -6,27 +6,47 @@ import MyCourses from "./myCourses"
 import FreeCourses from './freeCourses'
 import WithTab from '@/HOCs/WithTab'
 import WithFullSize from '@/HOCs/WithFullSize'
-import {compose} from 'redux'
+import { compose } from 'redux'
 
 
 class Study extends Component {
 
+    state = {
+
+    }
+
+    list;
+
+    storeScrollPosition(tab){
+
+    }
+
     render() {
         const {match} = this.props;
         return (
             <section id='study'>
                 <div className='tab'>
                     <div>
-                        <NavLink to={`${match.url}/my-course`} activeClassName='active'>我的课程</NavLink>
+                        <NavLink to={`${match.url}/my-course`}
+                                 replace
+                                 activeClassName='active'
+                        >我的课程</NavLink>
                     </div>
                     <div>
-                        <NavLink to={`${match.url}/free-course`} activeClassName='active'>免费课程</NavLink>
+                        <NavLink to={`${match.url}/free-course`}
+                                 replace
+                                 activeClassName='active'
+                        >免费课程</NavLink>
                     </div>
                 </div>
-                <div className="study-container">
+                <div className="study-container" ref={el => this.list = el}>
                     <Switch>
                         <Redirect exact from='/study' to='study/my-course'/>
-                        <Route path={`${this.props.match.path}/my-course`} component={MyCourses}/>
+                        {/*<Route path={`${this.props.match.path}/my-course`} component={MyCourses}/>
+                        <Route path={`${this.props.match.path}/free-course`} component={FreeCourses}/>*/}
+                        <Route path={`${this.props.match.path}/my-course`} render={props => {
+                            <MyCourses storeScrollPosition={this.storeScrollPosition}/>
+                        }}/>
                         <Route path={`${this.props.match.path}/free-course`} component={FreeCourses}/>
                     </Switch>
                 </div>
@@ -36,7 +56,6 @@ class Study extends Component {
 
 }
 
-// export default WithFullSize(WithTab(Study))
 export default compose(
     WithFullSize,
     WithTab

src/components/study/myCourses/actions.js

@@ -8,23 +8,31 @@ export const receiveMyCourses = payload => ({
 })
 
 
+const PAGE_INTERVAL = 1
+const NUM_INTERVAL = 10
+export const fetchCoursesListIfNeeded = () => (dispatch, getState) => {
+    const myCourses = getState().myCourses
+    const {shouldFetch, page, num} = myCourses
+    if (shouldFetch) {
+        dispatch(getMyCourses({
+            page: page + PAGE_INTERVAL,
+            num: num + NUM_INTERVAL
+        }))
+    }
+}
+
 export const getMyCourses = payload => dispatch => {
     return api.get(`/m/my_course/${payload.page}/${payload.num}`)
         .then(res => {
-            dispatch(receiveMyCourses(res.data))
+            dispatch(receiveMyCourses({
+                courseData: res.data,
+                page: payload.page,
+                num: payload.num
+            }))
+            dispatch(invalidateCourseDate())
         })
 }
 
-
-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

@@ -3,7 +3,11 @@ import { VList } from '@/common'
 import './my-courses.scss'
 import { isToday, format } from "date-fns"
 import { connect } from "react-redux"
-import { getMyCourses } from "./actions"
+import { fetchCoursesListIfNeeded } from "./actions"
+
+
+
+
 
 function getStudyTime(seconds) {
     return {
@@ -13,7 +17,6 @@ function getStudyTime(seconds) {
     }
 }
 
-
 function AddCourse(props) {
     return (
         <div className='add-course'>
@@ -49,12 +52,19 @@ function Record({record: {seconds, lesson_name}}) {
     )
 }
 
+
+
+
+
 class MyCourses extends PureComponent {
 
     state = {
-        addVisible: false
+        addVisible: false,
+        courseData: []
     }
 
+    list;
+
     handleClick = () => {
         console.log(1);
     }
@@ -63,7 +73,11 @@ class MyCourses extends PureComponent {
     }
 
     componentDidMount() {
-        this.props.getMyCourses({page: 1, num: 10});
+        this.props.fetchCoursesListIfNeeded();
+    }
+
+    componentWillUnmount() {
+        console.log('will unmount')
     }
 
     render() {
@@ -71,7 +85,7 @@ class MyCourses extends PureComponent {
         if (data && data.length !== 0) {
             return (
                 <>
-                    <ul>
+                    <ul ref={el => this.list = el}>
                         {
                             data.map((item, index) => {
 
@@ -124,6 +138,6 @@ const mapStateToProps = state => ({
     courseData: state.myCourses.courseData
 })
 
-const mapDispatchToProps = {getMyCourses}
+const mapDispatchToProps = {fetchCoursesListIfNeeded}
 
 export default connect(mapStateToProps, mapDispatchToProps)(MyCourses)
\ No newline at end of file

src/components/study/myCourses/reducers.js

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

src/index.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { createStore, applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
-import { logger } from 'redux-logger'
+import logger from 'redux-logger'
 import Routes from './router';
 import rootReducers from './store'