add custome react-redux;add global quick css

Author: xpioneer

src/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import App from './pages/app'
-import './assets/scss/app.scss'
+import './scss/app.scss'
 import 'antd/dist/antd.css'
 import 'quill/dist/quill.snow.css'
 import serviceWorker from './serviceWorker'

src/pages/demo/demoRedux.tsx

@@ -1,7 +1,7 @@
 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'
+import { ReduxProvider, connect } from '../../plugins/react-redux'
+import { store, countActions } from './reducer'
 
 console.log(store.getState(), '---store')
 
@@ -24,8 +24,7 @@ const styles = {
   }
 }
 
-
-export default class DemoRedux extends React.Component<IProps> {
+class DemoRedux extends React.Component<any> {
 
 
   add = () => {
@@ -36,36 +35,56 @@ export default class DemoRedux extends React.Component<IProps> {
   }
 
   shouldComponentUpdate(preState: any, nextProps: any) {
-    console.log(preState, nextProps)
-    return false
+    console.log(preState, nextProps, 'shouldComponentUpdate')
+    return true
   }
 
   componentDidMount() {
-    console.log(this, 'store.getState().counter')
+    console.log(this.props, 'demo --- componentDidMount store.getState().counter')
   }
 
   render(){
     // const count = 9
-    const { count } = store.getState().counter
-    console.log( count , ' =-===count ')
+    const { counter: {count}, disabled } = this.props
+    const { ADD, DECREASE } = this.props
+    console.log( count , 'demo render =-===count', disabled, )
 
-    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>
+    return <div>
+      <section style={styles.block}>
+        <h3>redux测试</h3>
+        <Row style={styles.padding}>
+          <Col span={24}>
+            <Button onClick={DECREASE}>
+              <Icon type="minus" />
+            </Button>
+            <Badge count={count} showZero={true}/>
+            <Button onClick={ADD}>
+              <Icon type="plus" />
+            </Button>
+          </Col>
+        </Row>
+      </section>
+    </div>
   }
-}
+}
+
+
+const DemosComponentWithRedux = connect(
+  (state: any) => ({
+    counter: state.counter,
+    disabled: state.counter.count > 10
+  }),
+  (dispatch: Function) => ({
+    ADD: () => dispatch(countActions.ADD),
+    DECREASE: () => dispatch(countActions.DECREASE)
+  })
+)(DemoRedux)
+
+
+const ProviderComponent: React.FC = () => {
+  return <ReduxProvider store={store}>
+    <DemosComponentWithRedux/>
+  </ReduxProvider>
+}
+
+export default ProviderComponent

src/pages/demo/reducer.ts

@@ -1,9 +1,4 @@
-import { createStore, combineReducers } from '../../plugins/redux'
-
-interface IAction {
-  type: string
-  playload: any
-}
+import { createStore, combineReducers, IAction } from '../../plugins/redux'
 
 const initCountState = {
   count: 0
@@ -14,14 +9,27 @@ const initInfoState = {
   desc: '我们可以学习到redux的原理...'
 }
 
+const ADD = 'ADD', DECREASE = 'DECREASE'
+
+export const countActions = {
+  
+  [ADD]: {
+    type: ADD
+  },
+
+  [DECREASE]: {
+    type: DECREASE
+  }
+}
+
 // reducer
 const countReducer = (state = initCountState, action: IAction) => {
   switch(action.type) {
-    case 'ADD' :
+    case ADD :
       state.count++
       console.log('add', state)
       return state
-    case 'DECREASE' :
+    case DECREASE :
       state.count--
       console.log('dec', state)
       return state

src/pages/lottery/ballEdit.tsx

@@ -156,7 +156,7 @@ export default class BallEdit extends React.Component<IProps> {
         </Row>
         <Row>
           <Col span={24} offset={3}>
-            <Button onClick={save} type="primary">保存</Button>
+            <Button onClick={save} type="primary" className="mgr16">保存</Button>
             <Button onClick={this.back}>取消</Button>
           </Col>
         </Row>

src/plugins/react-redux/connect.tsx

@@ -1,25 +1,55 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { ICreateStore } from '../redux'
 
-export function connect<T>(mapStateToProps: Function, mapDispatchToProps: Function) {
+export function connect<T>(
+  mapStateToProps?: Function,
+  mapDispatchToProps?: Function
+) {
 
-  return (WrappedComponent: React.ComponentType) => {
+  return function connectWithComponent(WrappedComponent: React.ComponentType) {
 
-    return class Connect extends Component {
-      constructor(props: any) {
+    return class CustomeComponent extends Component {
+      
+      static contextTypes = {
+        store: PropTypes.shape({
+          subscribe: PropTypes.func.isRequired,
+          dispatch: PropTypes.func.isRequired,
+          getState: PropTypes.func.isRequired
+        }).isRequired
+      }
+
+      constructor(props: any, context: {store: ICreateStore}) {
         super(props)
-        // this.state = 
+        this.store = context.store
+        this.state = mapStateToProps(this.store.getState())
+        if(typeof mapDispatchToProps === 'function') {
+          this.mappedDispatch = mapDispatchToProps(this.store.dispatch)
+        }
+        console.log('connect....constructor', this.state, this.mappedDispatch)
       }
+
+      state = {}
+
+      store = {} as ICreateStore
+      mappedDispatch: any = {}
+      unsub = () => {}
 
       componentDidMount() {
-        // 
+        console.log('connect----componentDidMount', mapStateToProps(this.store.getState()))
+        this.unsub = this.store.subscribe(() => {
+          const mappedState = mapStateToProps(this.store.getState())
+          console.log(mappedState, '----mappedState')
+          this.setState(mappedState)
+        })
       }
 
       componentWillUnmount() {
-        // 
+        this.unsub()
       }
 
       render() {
-        return <WrappedComponent {...this.props}/>
+        return <WrappedComponent {...this.props} {...this.state} {...this.mappedDispatch}/>
       }
     }
   }

src/plugins/react-redux/provider.tsx

@@ -1,27 +1,33 @@
 import React, { Component } from 'react'
-import { IAnyObject } from '../redux/model'
+import { IAnyObject, ICreateStore } from '../redux/model'
 import PropTypes from 'prop-types'
 
 interface IProviderProps{
-  $store: IAnyObject
+  store: IAnyObject
 }
 
-export class ReduxProvider extends Component<IProviderProps> {
+export class ReduxProvider extends Component<IProviderProps, ICreateStore> {
 
   static childContextTypes = {
-    $store: PropTypes.object
+    store: PropTypes.shape({
+      subscribe: PropTypes.func.isRequired,
+      dispatch: PropTypes.func.isRequired,
+      getState: PropTypes.func.isRequired
+    }).isRequired
   }
 
   constructor(props: IProviderProps) {
     super(props)
-    this.store = props.$store
+    this.$store = props.store
+    console.log('ReduxProvider---constructor', 999)
   }
 
-  store = {}
+  $store: IAnyObject = {}
 
   getChildContext() {
+    console.log('获取了---getChildContext', this.$store)
     return {
-      $store: this.store
+      store: this.$store
     }
   }
 

src/plugins/redux/createStore.ts

@@ -31,13 +31,13 @@ export const createStore = (reducer: Function, initState?: any, enhancer?: Funct
       }
       try{
         isDispatch = true
-        console.log('触发方法:', action, '更新state:', JSON.stringify(state))
+        console.log('触发方法:', action, '更新之前state:', JSON.stringify(state))
         state = reducer(state, action)
       } finally {
         isDispatch = false
       }
       listeners.forEach(ln => ln())
-      console.log('更新state之后:', state)
+      console.log('更新state之后:', JSON.stringify(state))
     }
 
     // 更新reducer

src/plugins/redux/index.ts

@@ -1,3 +1,3 @@
-
+export * from './model'
 export * from './createStore'
 export * from './combineReducers'

src/plugins/redux/model.ts

@@ -9,8 +9,8 @@ export interface IAnyObject {
 }
 
 export interface ICreateStore {
-  getState: Function
-  dispatch: Function
-  subscribe: Function
-  replaceReducer: Function
+  getState: () => any
+  dispatch: (action: IAction) => void
+  subscribe: (listener: Function) => () => void
+  replaceReducer: (nextReducer: Function) => void
 }

src/assets/scss/app.scss renamed to src/scss/app.scss

@@ -1,6 +1,7 @@
+@import './functions.scss';
 
 #app {
-  height: 100%;
+  // height: 100%;
 }
 
 #not-found{