add custom redux plugin

xpioneer · xpioneer · commit 42cbf009b40e · 2020-04-07T18:26:25.000+08:00
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -100,6 +100,7 @@ module.exports = {
       '@constants': resolve('src/constants'),
       '@models': resolve('src/models'),
       '@pages': resolve('src/pages'),
+      '@plugins': resolve('src/plugins'),
       '@utils': resolve('src/utils')
     }
   },
diff --git a/src/pages/demo/demoRedux.tsx b/src/pages/demo/demoRedux.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react'
+import { Row, Col, Button, Badge, Icon, Form, Input, Select } from 'antd'
+import { ReduxProvider, connect } from '@plugins/react-redux'
+import { store } from './reducer'
+
+console.log(store.getState(), '---store')
+
+const FormItem = Form.Item
+const TextArea = Input.TextArea
+const Option = Select.Option
+
+const styles = {
+  block: {
+    marginBottom: '20px',
+    boxShadow: 'rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px',
+    padding: '10px'
+  },
+  flex: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  padding: {
+    padding: '10px 0'
+  }
+}
+
+
+export default class DemoRedux extends React.Component<IProps> {
+  
+
+  add = () => {
+    store.dispatch({type: 'ADD'})
+  }
+  dec = () => {
+    store.dispatch({type: 'DECREASE'})
+  }
+
+  shouldComponentUpdate(preState: any, nextProps: any) {
+    console.log(preState, nextProps)
+    return false
+  }
+
+  componentDidMount() {
+    console.log(this, 'store.getState().counter')
+  }
+
+  render(){
+    // const count = 9
+    const { count } = store.getState().counter
+    console.log( count , ' =-===count ')
+    
+    return <ReduxProvider store={store}>
+      <div>
+        <section style={styles.block}>
+          <h3>redux测试</h3>
+          <Row style={styles.padding}>
+            <Col span={24}>
+              <Button onClick={this.dec}>
+                <Icon type="minus" />
+              </Button>
+              <Badge count={count} showZero={true}/>
+              <Button onClick={this.add}>
+                <Icon type="plus" />
+              </Button>
+            </Col>
+          </Row>
+        </section>
+      </div>
+    </ReduxProvider>
+  }
+}
diff --git a/src/pages/demo/reducer.ts b/src/pages/demo/reducer.ts
@@ -0,0 +1,60 @@
+import { createStore, combineReducers } from '../../plugins/redux'
+
+interface IAction {
+  type: string
+  playload: any
+}
+
+const initCountState = {
+  count: 0
+}
+
+const initInfoState = {
+  name: '这里是Redux',
+  desc: '我们可以学习到redux的原理...'
+}
+
+// reducer
+const countReducer = (state = initCountState, action: IAction) => {
+  switch(action.type) {
+    case 'ADD' :
+      state.count++
+      console.log('add', state)
+      return state
+    case 'DECREASE' :
+      state.count--
+      console.log('dec', state)
+      return state
+    default :
+      return state
+  }
+}
+
+// reducer
+const infoReducer = (state = initInfoState, action: IAction) => {
+  let random =  + Math.random()
+  switch(action.type) {
+    case 'SET_NAME' :
+      state.name = '这里是Redux' + random
+      return state
+    case 'SET_DESC' :
+      state.desc = '我们可以学习到redux的原理...' + random
+      return state
+    default :
+      return state
+  }
+}
+
+
+// 合并reducer
+const rootReducer = combineReducers({
+  counter: countReducer,
+  info: infoReducer
+})
+
+// store
+const store = createStore(rootReducer)
+
+export {
+  store
+}
diff --git a/src/pages/home/components/footer.tsx b/src/pages/home/components/footer.tsx
diff --git a/src/pages/home/components/header.tsx b/src/pages/home/components/header.tsx
diff --git a/src/pages/home/components/sider.tsx b/src/pages/home/components/sider.tsx
@@ -50,18 +50,20 @@ const MenuList = [{
     key: '99-0', title: '示例', path: '/home/demos', icon:'experiment'
   },{
     key: '99-1', title: '示例mobx', path: '/home/demo-mobx', icon:'experiment'
+  },{
+    key: '99-2', title: '示例redux', path: '/home/demo-redux', icon:'experiment'
   }]
 }]
 
 class SiderComponent extends React.Component<ISiderProps> {
 
-  componentWillReceiveProps() {
-    // console.log('willReceiveProps')
-  }
+  // componentWillReceiveProps() {
+  //   // console.log('willReceiveProps')
+  // }
 
-  componentWillUpdate(props: any){
-    // console.log('willUpdate')
-  }
+  // componentWillUpdate(props: any){
+  //   // console.log('willUpdate')
+  // }
 
   componentDidMount(){
     // console.log('didMount')
@@ -71,6 +73,7 @@ class SiderComponent extends React.Component<ISiderProps> {
     const {collapsed} = this.props
     
     return (<Sider
+      width="260"
       trigger={null}
       collapsible
       collapsed={collapsed}>
diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx
@@ -2,10 +2,10 @@ import * as React from 'react'
 import { Layout } from 'antd'
 import { inject, observer } from 'mobx-react'
 import Routes from '../../routes'
-import Sider from '@components/shared/sider'
-import Header from '@components/shared/header'
-import Footer from '@components/shared/footer'
-import { LocaleProvider } from 'antd'
+import Sider from './components/sider'
+import Header from './components/header'
+import Footer from './components/footer'
+import { LocaleProvider, ConfigProvider } from 'antd'
 
 const { Content } = Layout
 
@@ -16,7 +16,7 @@ class Home extends React.Component<IProps> {
   render(){
     const {homeStore} = this.props
     
-    return (<LocaleProvider locale={homeStore.lang}>
+    return (<ConfigProvider locale={homeStore.lang}>
       <Layout>
         <Sider {...homeStore}/>
         <Layout>
@@ -27,7 +27,7 @@ class Home extends React.Component<IProps> {
           <Footer/>
         </Layout>
       </Layout>
-    </LocaleProvider>)
+    </ConfigProvider>)
   }
 }
 
diff --git a/src/pages/home/store.ts b/src/pages/home/store.ts
@@ -6,7 +6,8 @@ import { JWT_TOKEN, SYS_LANG } from '@constants/index'
 const zhCN: any = zh_CN
 
 class HomeStore {
-  @observable authorized: boolean = (storage.get(JWT_TOKEN) || '').split('.').length === 3
+  @observable authorized: boolean = true
+  // @observable authorized: boolean = (storage.get(JWT_TOKEN) || '').split('.').length === 3
   @observable collapsed: boolean = false
   @observable lang: any = storage.get(SYS_LANG) === 'CN' ? zhCN : undefined
   
diff --git a/src/plugins/react-redux/connect.tsx b/src/plugins/react-redux/connect.tsx
@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+
+export function connect<T>(mapStateToProps: Function, mapDispatchToProps: Function) {
+  
+  return (WrappedComponent: React.ComponentType) => {
+  
+    return class Connect extends Component {
+      constructor(props: any) {
+        super(props)
+        // this.state = 
+      }
+    
+      componentDidMount() {
+        // 
+      }
+    
+      componentWillUnmount() {
+        // 
+      }
+    
+      render() {
+        return <WrappedComponent {...this.props}/>
+      }
+    }
+  }
+} 
diff --git a/src/plugins/react-redux/index.ts b/src/plugins/react-redux/index.ts
@@ -0,0 +1,2 @@
+export * from './provider'
+export * from './connect'
diff --git a/src/plugins/react-redux/provider.tsx b/src/plugins/react-redux/provider.tsx
@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import { IAnyObject } from '../redux/model'
+import PropTypes from 'prop-types'
+
+interface IProviderProps{
+  $store: IAnyObject
+}
+
+export class ReduxProvider extends Component<IProviderProps> {
+  
+  static childContextTypes = {
+    $store: PropTypes.object
+  }
+
+  constructor(props: IProviderProps) {
+    super(props)
+    this.store = props.$store
+  }
+
+  store = {}
+
+  getChildContext() {
+    return {
+      $store: this.store
+    }
+  }
+
+  render() {
+    // console.log('$store', )
+    return this.props.children
+  }
+}
diff --git a/src/plugins/redux/applyMiddlewares.ts b/src/plugins/redux/applyMiddlewares.ts
@@ -0,0 +1,30 @@
+import { IAction, ICreateStore } from './model'
+
+// compose
+const compose = (fns: Function[]) => fns.reduce((f, g) => (...args: any[]) => f(g(args)))
+
+// 中间件
+const loggerMiddleware = (store: any) => {
+  return (next: Function) => {
+    return (action: IAction) => {
+      next(action)
+    }
+  }
+}
+
+
+export const applyMiddleware = (...middlewares: Function[]) => {
+  return (createStore: Function) => {
+    return (reducer: Function, initState: any): ICreateStore => {
+      const store: ICreateStore = createStore(reducer, initState)
+      const chain = middlewares.map(middleware => middleware(store))
+      let dispatch = store.dispatch
+      // chain.reverse().forEach(middleware => {
+      //   dispatch = middleware(dispatch)
+      // })
+      dispatch = compose(chain)(dispatch)
+      store.dispatch = dispatch // 重写dispatch
+      return store
+    }
+  } 
+} 
diff --git a/src/plugins/redux/combineReducers.ts b/src/plugins/redux/combineReducers.ts
@@ -0,0 +1,13 @@
+import { IAction, IAnyObject } from './model'
+
+// 组合reducer，计算后存为单个state
+export const combineReducers = (reducers: IAnyObject) => {
+  // 这里重新组合state
+  return (state = {}, action: IAction) => {
+    let newState = {}
+    for(let key in reducers) {
+      newState[key] = reducers[key](state[key], action)
+    }
+    return newState
+  }
+}
diff --git a/src/plugins/redux/createStore.ts b/src/plugins/redux/createStore.ts
@@ -0,0 +1,63 @@
+import { IAction, ICreateStore } from './model'
+
+// 创建store
+export const createStore = (reducer: Function, initState?: any, enhancer?: Function): ICreateStore => {
+  let state: any = initState, listeners: Function[] = [], isDispatch = false
+  if(typeof initState === 'function') {
+    enhancer = initState
+    initState = undefined
+  }
+
+  if(enhancer) {
+    const newCreateStore =  enhancer(createStore)
+    return newCreateStore(reducer, initState)
+  } else {
+    // 获取状态
+    const getState = () => state
+
+    // 订阅
+    const subscribe = (listener: Function) => {
+      listeners.push(listener)
+      const unsubscribe = () => {
+        listeners = listeners.filter(ln => listener !== ln) // 保留之前订阅的
+      }
+      return unsubscribe
+    }
+
+    // 更新状态
+    const dispatch = (action: IAction) => {
+      if(isDispatch){
+        throw new Error('dispatching...')
+      }
+      try{
+        isDispatch = true
+        console.log('触发方法:', action, '更新state:', JSON.stringify(state))
+        state = reducer(state, action)
+      } finally {
+        isDispatch = false
+      }
+      listeners.forEach(ln => ln())
+      console.log('更新state之后:', state)
+    }
+
+    // 更新reducer
+    const replaceReducer = (nextReducer: Function) => {
+      reducer = nextReducer
+      dispatch({
+        type: `@@REDUX/__REPLACE__${Math.random()}`
+      })
+    }
+
+    // 用来获取初始值
+    dispatch({
+      type: `@@REDUX/__INIT__${Math.random()}`
+    })
+
+    return {
+      getState,
+      dispatch,
+      subscribe,
+      replaceReducer
+    }
+  }
+}
diff --git a/src/plugins/redux/index.ts b/src/plugins/redux/index.ts
diff --git a/src/plugins/redux/model.ts b/src/plugins/redux/model.ts
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -100,6 +100,7 @@ module.exports = {`
`100`	`100`	`'@constants': resolve('src/constants'),`
`101`	`101`	`'@models': resolve('src/models'),`
`102`	`102`	`'@pages': resolve('src/pages'),`
	`103`	`+ '@plugins': resolve('src/plugins'),`
`103`	`104`	`'@utils': resolve('src/utils')`
`104`	`105`	`}`
`105`	`106`	`},`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from './provider'`
	`2`	`+export * from './connect'`