redux-saga

bug fixed

README.MD

@@ -1,17 +1,15 @@
-# 秦时明月
 
- ### 技术栈
+### 技术栈
 
  * vite
  * react
  * react-router
  * redux
+ * redux-saga
  * windicss
 
 ### 目的
 
-制作一个展示秦时明月的网站
-
 > 资源链接：
 > [React Router](https://reactrouter.com/web/guides/quick-start)
 > [vite](https://cn.vitejs.dev/config/#resolve-alias)
@@ -19,3 +17,4 @@
 > [react-admin](https://gitee.com/sxfad/react-admin?_from=gitee_search)
 > [实现SLOT](https://www.jb51.net/article/165648.htm)
 > [context](https://www.jianshu.com/p/65b348bf86ad)
+> [redux-saga](https://redux-saga-in-chinese.js.org/)

package-lock.json

@@ -310,6 +310,53 @@
         "fastq": "^1.6.0"
       }
     },
+    "@redux-saga/core": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npm.taobao.org/@redux-saga/core/download/@redux-saga/core-1.1.3.tgz",
+      "integrity": "sha1-MIUJe1ek6o21Uo1YZz8gzglQ9qQ=",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@redux-saga/deferred": "^1.1.2",
+        "@redux-saga/delay-p": "^1.1.2",
+        "@redux-saga/is": "^1.1.2",
+        "@redux-saga/symbols": "^1.1.2",
+        "@redux-saga/types": "^1.1.0",
+        "redux": "^4.0.4",
+        "typescript-tuple": "^2.2.1"
+      }
+    },
+    "@redux-saga/deferred": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npm.taobao.org/@redux-saga/deferred/download/@redux-saga/deferred-1.1.2.tgz",
+      "integrity": "sha1-WZN6Drpx//KJ8TECM7xRgRenGIg="
+    },
+    "@redux-saga/delay-p": {
+      "version": "1.1.2",
+      "resolved": "https://registry.nlark.com/@redux-saga/delay-p/download/@redux-saga/delay-p-1.1.2.tgz",
+      "integrity": "sha1-j1FfSwCbBbAqN6fD0Mqd3BV7s1U=",
+      "requires": {
+        "@redux-saga/symbols": "^1.1.2"
+      }
+    },
+    "@redux-saga/is": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npm.taobao.org/@redux-saga/is/download/@redux-saga/is-1.1.2.tgz",
+      "integrity": "sha1-rmyEIfWPy6gPr3ytt9ZbMDuX5Y4=",
+      "requires": {
+        "@redux-saga/symbols": "^1.1.2",
+        "@redux-saga/types": "^1.1.0"
+      }
+    },
+    "@redux-saga/symbols": {
+      "version": "1.1.2",
+      "resolved": "https://registry.nlark.com/@redux-saga/symbols/download/@redux-saga/symbols-1.1.2.tgz",
+      "integrity": "sha1-IWpnKkh/wlaHK4A0g1r8IqLQWV0="
+    },
+    "@redux-saga/types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/@redux-saga/types/download/@redux-saga/types-1.1.0.tgz",
+      "integrity": "sha1-DoHOVrSIO0sqMAHr4aspi4QjcgQ="
+    },
     "@rollup/pluginutils": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz",
@@ -455,6 +502,14 @@
         "picomatch": "^2.0.4"
       }
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.nlark.com/axios/download/axios-0.21.1.tgz",
+      "integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@@ -646,6 +701,11 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "follow-redirects": {
+      "version": "1.14.1",
+      "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz?cache=0&sync_timestamp=1620555300559&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.1.tgz",
+      "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M="
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -1047,6 +1107,14 @@
         "symbol-observable": "^1.2.0"
       }
     },
+    "redux-saga": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npm.taobao.org/redux-saga/download/redux-saga-1.1.3.tgz",
+      "integrity": "sha1-nz5q69PJlLvA9pAaYl+aQrUdERI=",
+      "requires": {
+        "@redux-saga/core": "^1.1.3"
+      }
+    },
     "regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
@@ -1258,6 +1326,27 @@
       "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
       "dev": true
     },
+    "typescript-compare": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npm.taobao.org/typescript-compare/download/typescript-compare-0.0.2.tgz",
+      "integrity": "sha1-fuQKQApAbC6gp+VR79MwkCHV9CU=",
+      "requires": {
+        "typescript-logic": "^0.0.0"
+      }
+    },
+    "typescript-logic": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npm.taobao.org/typescript-logic/download/typescript-logic-0.0.0.tgz",
+      "integrity": "sha1-ZuvYKiVI8rREpDZnvsEgtJaJAZY="
+    },
+    "typescript-tuple": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npm.taobao.org/typescript-tuple/download/typescript-tuple-2.2.1.tgz",
+      "integrity": "sha1-fZgT+0s1X2msVQMuA2Pouw8E2tI=",
+      "requires": {
+        "typescript-compare": "^0.0.2"
+      }
+    },
     "value-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",

package.json

@@ -6,12 +6,14 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "classnames": "^2.3.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "redux": "^4.1.0",
+    "redux-saga": "^1.1.3",
     "styled-jsx": "^3.4.4"
   },
   "devDependencies": {

src/AppRouter.tsx

@@ -6,17 +6,23 @@ import { pageList } from "@/plugins/pageHoc"
 import Layout from "@/views/Layout"
 
 import Auth from "@/ui/Auth"
-import routes from "./route"
+import routes, { Loading } from "./route"
 
-function Wrapper(props: any) {
-  if (props.loading) {
-    return <React.Suspense fallback={<props.loading></props.loading>}>{props.children}</React.Suspense>
+function NormalLoading() {
+  return <Loading color="#ff0000"></Loading>
+}
+
+function LoadWrapper(props: any) {
+  if (props.isLazy) {
+    const LoadingComp=props.loading?props.loading: ()=><Loading color="#ff0000"></Loading> //NormalLoading;
+    return <React.Suspense fallback={<LoadingComp></LoadingComp>}>{props.children}</React.Suspense>
   }
   return <Fragment>{props.children}</Fragment>
 }
 
 function RouteMap(props: any) {
   const routes: any[] = props.routes
+
   return (
     <Switch>
       {routes.map((route, index) => {
@@ -31,11 +37,9 @@ function RouteMap(props: any) {
         if (route.component) {
           return (
             <Auth key={index} needAuth={!!route.meta?.auth} path={route.path} exact={exact}>
-              <Wrapper loading={route.loading}>
-                <route.component meta={route.meta}>
-                  {route.children && <RouteMap routes={route.children}></RouteMap>}
-                </route.component>
-              </Wrapper>
+              <LoadWrapper loading={route.loading} isLazy={typeof route.component.$$typeof === "symbol"}>
+                <route.component meta={route.meta}>{route.children && <RouteMap routes={route.children}></RouteMap>}</route.component>
+              </LoadWrapper>
             </Auth>
           )
         }

src/route.tsx

@@ -5,7 +5,7 @@ function Test() {
   return <div>TExtas</div>
 }
 
-const Loading = (props: any) => <div style={{ color: props.color }}>Lodeing.22..</div>
+export const Loading = (props: any) => <div style={{ color: props.color }}>Lodeing.22..</div>
 
 let delay =
   (Comp: any, duration = 1000) =>

src/store/action/todo.ts

@@ -1,11 +1,11 @@
-import {ADD, REMOVE} from "@/store/constant/todo"
+import {ADD, REMOVE, ADD_ASYNC} from "@/store/constant/todo"
 
 let nextTodoId = 0
 
 type Action = (param: any) => IAction
 
 export const addTodo: Action = text => ({
-  type: ADD,
+  type: ADD_ASYNC,
   id: nextTodoId++,
   text
 })

src/store/constant/todo.ts

@@ -1,2 +1,4 @@
 export const ADD = "ADD_TODO"
+export const ADD_ASYNC = "ADD_ASYNC"
+
 export const REMOVE = "REMOVE_TODO"

src/store/index.ts

@@ -1,8 +1,13 @@
-import {combineReducers, createStore} from 'redux'
+import {applyMiddleware, combineReducers, createStore} from 'redux'
 import reducer from "./reducer"
+import createSagaMiddleware from 'redux-saga'
+import mySaga from './saga'
+
+const sagaMiddleware = createSagaMiddleware()
 
 const reduces = combineReducers(reducer)
-const store = createStore(reduces)
+const store = createStore(reduces, applyMiddleware(sagaMiddleware))
 
+sagaMiddleware.run(mySaga)
 
 export default store

src/store/saga/index.ts

@@ -0,0 +1,52 @@
+import { call, put, takeEvery, takeLatest } from "redux-saga/effects"
+import { ADD, REMOVE, ADD_ASYNC } from "@/store/constant/todo"
+import axios, { Method } from "axios"
+
+const instance = axios.create({
+  timeout: 3000,
+})
+const http = (method: Method = "GET", url: string) => {
+  return instance({
+    method,
+    url,
+  })
+}
+
+let Api: any = {
+  fetchUser: async (id: any) => {
+    return await http("GET", "https://gank.io/api/v2/banners")
+  },
+}
+
+// worker Saga : 将在 USER_FETCH_REQUESTED action 被 dispatch 时调用
+function* fetchUser(action: any) {
+  try {
+    // @ts-ignore
+    const user = yield call(Api.fetchUser, action?.id)
+    console.log(user)
+    yield put({ type: ADD, id: action.id, text: user.data.data[0].image })
+  } catch (e) {
+    yield put({ type: "USER_FETCH_FAILED", message: e.message })
+  }
+}
+
+/*
+  在每个 `USER_FETCH_REQUESTED` action 被 dispatch 时调用 fetchUser
+  允许并发（译注：即同时处理多个相同的 action）
+*/
+function* mySaga() {
+  yield takeEvery(ADD_ASYNC, fetchUser)
+}
+
+/*
+  也可以使用 takeLatest
+
+  不允许并发，dispatch 一个 `USER_FETCH_REQUESTED` action 时，
+  如果在这之前已经有一个 `USER_FETCH_REQUESTED` action 在处理中，
+  那么处理中的 action 会被取消，只会执行当前的
+*/
+// function* mySaga() {
+//   yield takeLatest("USER_FETCH_REQUESTED", fetchUser)
+// }
+
+export default mySaga

src/views/Home/Header.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 
 export default () => {
-  const title = "美女管理后台"
+  const title = "TEST"
   const [leftMenuList, setLeftMenuList] = useState<any[]>([
     { title: "首页", path: "/" },
     { title: "角色", children: [{ title: "月儿", path: "/about" }] },

src/views/Login/index.module.scss

@@ -0,0 +1,3 @@
+.login.page{
+  background-color: red;
+}

src/views/Login/index.tsx

@@ -1,4 +1,6 @@
 import React from "react"
+import cn from "classnames"
+import style from "./index.module.scss"
 import { useLocation, Route, Switch } from "react-router-dom"
 
 function Test() {
@@ -6,11 +8,8 @@ function Test() {
 }
 
 export default function (props: any) {
-  let location = useLocation()
-  console.log(location)
-  console.log(props)
   return (
-    <div className="container mx-auto">
+    <div className={cn(style.login, style.page)}>
       <div>Login</div>
       <div>22</div>
     </div>