feat: redux数据同构

Author: vnues

build/client/utils.js

@@ -59,14 +59,14 @@ exports.styleLoaders = function(options) {
     ]
   })
 
-  // output.push({
-  //   test: /\.css$/,
-  //   include: /node_modules/,
-  //   use: [
-  //     options.extract ? MiniCssExtractPlugin.loader : 'style-loader',
-  //     { loader: 'css-loader' }
-  //   ]
-  // })
+  output.push({
+    test: /\.css$/,
+    include: /node_modules/,
+    use: [
+      options.extract ? MiniCssExtractPlugin.loader : 'style-loader',
+      { loader: 'css-loader' }
+    ]
+  })
 
   return output
 }

src/client/components/container/index.tsx

@@ -1,96 +1,70 @@
-// 高阶组件 用于提取重复逻辑
-
+//高阶组件 用于提取重复逻辑
 import React from 'react'
 
-let _this: any = null
-let _isPop = false //是否触发过popState
-let _isMount = false //组件是否挂载完成
+let _this = null
+
 const popStateCallback = () => {
-  // 使用 popStateCallback 保存函数防止 addEventListener 重复注册
+  // 使用popStateFn保存函数防止addEventListener重复注册
   if (_this && _this.getInitialProps) {
     console.log('popStateFn')
-    _isPop = true
-    if (_isMount) {
-      //只有当前组件挂载后才能执行数据预取，否则会报错
-      _this.getInitialProps()
-    }
+    _this.getInitialProps()
   }
 }
 
-export default (SourceComponent: any) => {
-  return class HoComponent extends React.Component<any, any> {
-    constructor(props: any) {
+export default SourceComponent => {
+  return class HoComponent extends React.Component {
+    constructor(props, context) {
       super(props)
-
+      console.log('props', props)
       this.state = {
         initialData: {},
-        canClientFetch: false // 浏览器端是否需要请求数据
+        canClientFetch: false //浏览器端是否需要请求数据
       }
     }
-    // 用于服务端调用
-    static async getInitialProps(ctx: any) {
+
+    //转接子组件的预取方法，服务端会调用这个方法来做数据预取
+    static async getInitialProps(ctx) {
       return SourceComponent.getInitialProps
         ? await SourceComponent.getInitialProps(ctx)
         : {}
     }
-
-    //用于封装处理
+    // ! csr/ssr切换路由时才调用组件的getInitialProps方法
+    //用于封装处理数据的更新逻辑
     async getInitialProps() {
       // ssr首次进入页面以及csr/ssr切换路由时才调用组件的getInitialProps方法
-      const { match, location } = this.props
+      const props = this.props
+      const store = window.__STORE__ //从全局得到 store
+
+      // 兼容不使用 redux 的页面
+      // 通过props.getInitialData判断
+      // ! 那就说明约定getInitialData
       const res = SourceComponent.getInitialProps
-        ? await SourceComponent.getInitialProps({ match, location })
+        ? await SourceComponent.getInitialProps({ store })
         : {}
-      this.setState({
-        initialData: res,
-        canClientFetch: true
-      })
-
-      console.log('getInitialProps')
-      let { tdk } = res.page
+      //处理页面 title 显示
+      let { tdk } = res.page || {}
       if (tdk) {
         document.title = tdk.title
       }
     }
 
     async componentDidMount() {
-      //注册事件，用于在页面回退和前进的时候触发
-      _isMount = true //组件挂载完成
-      // @ts-ignore
-      if (window.__IS__SSR__) {
-        //只有当启用 ssr 时
-        _this = this // 修正_this指向，保证_this指向当前渲染的页面组件
-        //注册事件
-        window.addEventListener('popstate', popStateCallback)
-
-        if (_isPop) {
-          //如果前进或者后退 则需要异步获取数据
-          this.getInitialProps()
-        }
-      }
+      _this = this // 修正_this指向，保证_this指向当前渲染的页面组件
+      //注册事件，用于在页面回退的时候触发
+      window.addEventListener('popstate', popStateCallback)
 
       const canClientFetch = this.props.history && this.props.history.action === 'PUSH' //路由跳转的时候可以异步请求数据
-      console.log('canClientFetch', canClientFetch)
-      // @ts-ignore
-      if (canClientFetch || !window.__IS__SSR__) {
+      if (canClientFetch) {
+        //如果是 history PUSH 操作 则更新数据
         await this.getInitialProps()
       }
     }
 
-    componentWillUnmount() {
-      console.log('unmount')
-      _isPop = false //重置为未触发
-      _isMount = false //重置为未挂载
-    }
-
     render() {
-      // 只有在首次进入页面需要将window.__INITIAL_DATA__作为props，路由切换时不需要
-
       const props = {
         initialData: {},
         ...this.props
       }
-      // @ts-ignore
 
       if (__SERVER__) {
         //服务端渲染
@@ -101,9 +75,7 @@ export default (SourceComponent: any) => {
           //需要异步请求数据
           props.initialData = this.state.initialData || {}
         } else {
-          // @ts-ignore
           props.initialData = window.__INITIAL_DATA__
-          // @ts-ignore
           window.__INITIAL_DATA__ = null //使用过后清除数据,否则其他页面会使用
         }
       }

src/client/main/index.tsx

@@ -15,15 +15,20 @@ import proConfig from '../../common/pro-config'
 import StyleContext from 'isomorphic-style-loader/StyleContext'
 import { Provider } from 'react-redux'
 
-import store from '@/store/reducers'
+import getStore from '@/store/reducers'
 
-function renderDom(routeList: any) {
+function renderDom(routeList: any, initStoreState?: any) {
   //  @ts-ignore
   const insertCss = (...styles) => {
     const removeCss = styles.map(style => style._insertCss()) // 客户端执行，插入style
     return () => removeCss.forEach(dispose => dispose()) // 组件卸载时 移除当前的 style 标签
   }
-  // 渲染index
+  // !redux数据更新
+  const store = getStore(initStoreState)
+  // 服务端只需要获取state就行 我们方法的定义在redux就定义好了
+  console.log('同步更新的客户端store', store.getState())
+  // @ts-ignore
+  window.__STORE__ = store
   // @ts-ignore
   const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate
   renderMethod(
@@ -39,21 +44,28 @@ function renderDom(routeList: any) {
 }
 
 function clientRender(routeList: any) {
+  let initialData: any = null
+  let initStoreState: any = null
   if (document.getElementById('ssrTextInitData')) {
     // @ts-ignore
     let value = document.getElementById('ssrTextInitData').value
-    let initialData = JSON.parse(value && value.replace(/\\n/g, ''))
+    initialData = JSON.parse(value && value.replace(/\\n/g, ''))
     // @ts-ignore
     window.__INITIAL_DATA__ = initialData || {}
   }
 
+  if (document.getElementById('ssrTextInitStoreData')) {
+    // @ts-ignore
+    let value = document.getElementById('ssrTextInitStoreData').value
+    initStoreState = JSON.parse(value && value.replace(/\\n/g, ''))
+  }
+
   //查找路由
   let matchResult = matchRoute(document.location.pathname, routeList)
   let { targetRoute } = matchResult
   if (targetRoute) {
     //预加载 等待异步脚本加载完成
     if (targetRoute.component[proConfig.asyncComponentKey]) {
-      console.log('targetRoute===>', targetRoute)
       targetRoute
         .component()
         .props.load()
@@ -62,11 +74,10 @@ function clientRender(routeList: any) {
           console.log('异步组件加载完成.')
           //设置已加载完的组件，否则需要重新请求
           // targetRoute.component = res ? res.default : null
-          renderDom(routeList)
+          renderDom(routeList, initStoreState)
         })
     }
   } else {
-    console.log('renderDom==>', renderDom)
     renderDom(routeList)
   }
 }

src/client/main/layout.tsx

@@ -1,24 +1,27 @@
-import React from 'react';
-import { Link, NavLink } from 'react-router-dom';
-import { withRouter } from 'react-router';
-import { hot } from 'react-hot-loader/root';
+import React from 'react'
+import { Link, NavLink } from 'react-router-dom'
+import { withRouter } from 'react-router'
+import { hot } from 'react-hot-loader/root'
 
-import css from  './layout.less';
+// @ts-ignore
+import css from './layout.less'
 
+// @ts-ignore
 import withStyles from 'isomorphic-style-loader/withStyles'
 
 class Index extends React.Component {
   constructor(props: any) {
-    super(props);
+    super(props)
   }
 
-
   render() {
-    return <div className="layout-box">
-      <h1>koa+react+ssr</h1>
-      {this.props.children}
-    </div>
+    return (
+      <div className="layout-box">
+        <h1>koa+react+ssr</h1>
+        {this.props.children}
+      </div>
+    )
   }
 }
 
-export default withStyles(css)(hot(Index));
+export default withStyles(css)(hot(Index))

src/client/modules/home/index.tsx

@@ -6,6 +6,7 @@ import isConnect from '@/library/isConnect'
 
 console.log('css', css)
 export const Home: FC<any> = (props: any) => {
+  console.log('props', props)
   const [nums, setNums] = useState<number[]>([1, 2, 3, 4, 5, 6])
   const handleClick = () => {
     window.alert('handleClick')
@@ -14,31 +15,39 @@ export const Home: FC<any> = (props: any) => {
     <div className="home">
       <h1>hello react-ssr</h1>
       <button onClick={handleClick}>click me1的顶顶顶顶顶的</button>
-      {
-        [111, 2, 3, 4, 5, 6111, 17, 338, 1232221].map((item: number) => <div key={item}>
-          {item}
-        </div>)
-      }
+      {[111, 2, 3, 4, 5, 6111, 17, 338, 1232221].map((item: number) => (
+        <div key={item}>{item}</div>
+      ))}
       <Link to={'/history'}>2222clqick to2 404 page12为</Link>
     </div>
   )
 }
 // @ts-ignore
+// ! 约定 服务端会调用这个方法  ===> 相当于是生命周期
+// 这一块可能会设计到把redux的操作
 Home.getInitialProps = ({ store }: any) => {
   console.log(store)
-  store.dispatch.home.SET_PLAYERS([100, 200, 300])
+  // TODO
+  // 在这个生命周期调用getInitialData
+  store.dispatch.home.getInitialData()
+  // store.dispatch.home.SET_PLAYERS([100, 200, 300,999])
 }
 
 const mapStateToProps = (state: any) => ({
-  home: state.home,
-});
+  home: state.home
+})
 
 const mapDispatchToProps = (dispatch: any) => ({
+  getInitialData:(dispatch:any)=>{
+    dispatch.home.getInitialData()
+  }
+})
 
-});
-
-export default isConnect({
-  css,
-  mapStateToProps,
-  mapDispatchToProps
-}, Home)
+export default isConnect(
+  {
+    css,
+    mapStateToProps,
+    mapDispatchToProps
+  },
+  Home
+)

src/client/store/home/index.ts

@@ -17,12 +17,27 @@ export default createModel<any>()({
     }
   },
   effects: (dispatch: any) => {
-    const { players } = dispatch
+    const { home } = dispatch
     return {
       async getPlayers(): Promise<any> {
         let response = await fetch('https://www.balldontlie.io/api/v1/players')
         let { data }: { data: HomeState[] } = await response.json()
-        players.SET_PLAYERS(data)
+        home.SET_PLAYERS(data)
+      },
+      // ! 约定的方法
+      getInitialData(){
+        return new Promise(resolve=>{
+          //延迟 500ms 返回数据
+            setTimeout(() => {
+              const data = {
+              test:'123'
+              }
+              resolve(data);
+              //更新状态
+              console.log('players',home)
+              home.SET_PLAYERS([800,800,800])
+            }, 500);
+          })
       }
     }
   }

src/client/store/reducers.ts

@@ -2,12 +2,15 @@ import { init } from '@rematch/core'
 import promise from 'redux-promise-middleware'
 import home from './home'
 
-const store = init({
-  models: { home },
-  redux: {
-    reducers: {},
-    middlewares: [promise]
-  }
-})
 
-export default store
+export default function getStore(initState?:any){
+  const store = init({
+    models: { home },
+    redux: {
+      initialState:initState,
+      reducers: {},
+      middlewares: [promise]
+    }
+  })
+  return store
+}