add custom redux plugin

Author: xpioneer

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')
     }
   },

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>
+  }
+}

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
+}

src/components/shared/footer.tsx renamed to src/pages/home/components/footer.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}>

src/components/shared/header.tsx renamed to src/pages/home/components/header.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>)
   }
 }
 

src/components/shared/sider.tsx renamed to src/pages/home/components/sider.tsx

@@ -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
 

src/pages/home/home.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}/>
+      }
+    }
+  }
+} 

src/pages/home/store.ts

@@ -0,0 +1,2 @@
+export * from './provider'
+export * from './connect'