feat: add example

Author: vnues

.eslintrc.json

@@ -132,6 +132,7 @@
     "no-alert": "off",
     "no-plusplus": "off",
     "no-await-in-loop": "off",
+    "no-new": "off",
     "no-shadow": [
       "off",
       {

package.json

@@ -9,14 +9,14 @@
     "docs"
   ],
   "scripts": {
-    "dev": "node ./build/start.js",
+    "start": "node ./build/start.js",
+    "dev": "npm run client:dev & node ./dist/server/app",
     "client:dev": "node ./build/client/dev-server.js",
     "server:dev": "node ./build/server/dev-server.js",
     "build": "node ./build/client/prod-build.js",
     "client:build": "node ./build/client/prod-build.js",
     "server:build": "cross-env  NODE_ENV=production webpack --config  ./build/server/webpack.server.config.js",
     "server-dev:build": "cross-env  NODE_ENV=development node ./build/server/dev-build.js",
-    "start": "node ./dist/server/app.js",
     "mock": "oock -c ./mock/config.js ",
     "gc": "git-cz",
     "stylelint:fix": "stylelint './src/**/*.less' --syntax less --fix",

src/client/modules/home/index.less

@@ -79,6 +79,7 @@ html {
 
 .click-btn {
   margin-top: 20px;
+  margin-left: 20px;
 }
 
 img {

src/client/modules/home/index.tsx

@@ -1,10 +1,15 @@
-import React from 'react'
-import { Link } from 'react-router-dom'
+import React, { useState } from 'react'
 import style from './index.less'
 import isConnect from '@/library/isConnect'
 import Logo from './logo.jpg'
 
-export const Home = () => {
+export interface IUser {
+  name: string
+  id: string
+}
+export const Home = (props: any) => {
+  const { initialData } = props
+  const [user, setUser] = useState<IUser>(initialData)
   const handleClick = () => {
     alert('handleClick')
   }
@@ -34,33 +39,39 @@ export const Home = () => {
         </div>
         <div
           role="button"
-          tabIndex={0}
           className="button--green click-btn"
+          tabIndex={0}
           onClick={handleClick}
           onKeyDown={handleClick}
         >
           点一点
         </div>
+        <span className="button--green click-btn">作者：{user.name}</span>
+        <span className="button--green click-btn">ID：{user.id}</span>
       </div>
     </div>
   )
 }
-// ! 约定 服务端会调用这个方法  ===> 相当于是生命周期
-// 这一块可能会设计到把redux的操作
 Home.asyncData = ({ store }: any) => {
-  // TODO 在这个生命周期调用getInitialData
-  store.dispatch.home.getInitialData()
+  // 模拟异步请求
+  const data = {
+    name: 'vnues',
+    id: '@1213'
+  }
+  // TODO 这里改动 服务端没有做更新
+  store.dispatch.home.setUser(data)
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(data)
+    }, 2000)
+  })
 }
 
 const mapStateToProps = (state: any) => ({
   home: state.home
 })
 
-const mapDispatchToProps = () => ({
-  getInitialData: (dispatch: any) => {
-    dispatch.home.getInitialData()
-  }
-})
+const mapDispatchToProps = () => ({})
 
 export default isConnect(
   {

src/client/store/home/index.ts

@@ -1,41 +1,19 @@
+import { IUser } from '@/modules/home'
 import { createModel } from '@rematch/core'
 
 interface HomeState {
-  players: any[]
+  users: IUser
 }
 
 export default createModel<any>()({
   state: {
-    players: [1, 2, 3, 99]
+    users: {}
   } as HomeState,
   reducers: {
-    SET_PLAYERS: (state: HomeState, players: HomeState[]) => ({
+    setUser: (state: HomeState, users: IUser) => ({
       ...state,
-      players
+      users
     })
   },
-  effects: (dispatch: any) => {
-    const { home } = dispatch
-    return {
-      async getPlayers(): Promise<any> {
-        const response = await fetch('https://www.balldontlie.io/api/v1/players')
-        const { data }: { data: HomeState[] } = await response.json()
-        home.SET_PLAYERS(data)
-      },
-      // ! 约定的方法
-      getInitialData() {
-        return new Promise(resolve => {
-          // 延迟 500ms 返回数据
-          setTimeout(() => {
-            const data = {
-              test: '123'
-            }
-            resolve(data)
-            // 更新状态
-            home.SET_PLAYERS([800, 800, 800])
-          }, 500)
-        })
-      }
-    }
-  }
+  effects: (dispatch: any) => ({})
 })

src/server/app/index.ts

@@ -10,7 +10,6 @@ const app = new Koa()
 // 引入代理模块
 const options = {
   targets: {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     '/__hmr': {
       target: 'http://localhost:8080',
       changeOrigin: true

src/server/middlewares/genHtml.tsx

@@ -33,6 +33,7 @@ export default async function genHtml(
     if (fetchDataFn) {
       // 更新 state
       fetchResult = await fetchDataFn({ store })
+      console.log(fetchResult)
     }
   }