减小app.js体积

Author: hyy1115

src/containers/BookList/BookList.js

@@ -2,8 +2,6 @@
  * Created by Administrator on 2016/7/1.
  */
 import React from 'react'
-//import { bindActionCreators } from 'redux'
-//import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
 export default class BookList extends React.Component {

src/containers/Commons/Provider.js

@@ -0,0 +1,31 @@
+//该文件是Provider源码，从这个HOC中，你可以学习到什么？自己看吧！
+
+import { Component, Children } from 'react'
+import PropTypes from 'prop-types'
+import { storeShape, subscriptionShape } from 'utils/PropTypes'
+
+export function createProvider(storeKey = 'store', subKey) {
+    const subscriptionKey = subKey || `${storeKey}Subscription`
+    class Provider extends Component {
+        constructor(props, context) {
+            super(props, context)
+            this[storeKey] = props.store;
+        }
+        getChildContext() {
+            return { [storeKey]: this[storeKey], [subscriptionKey]: null }
+        }
+        render() {
+            return Children.only(this.props.children)
+        }
+    }
+    Provider.propTypes = {
+        store: storeShape.isRequired,
+        children: PropTypes.element.isRequired
+    }
+    Provider.childContextTypes = {
+        [storeKey]: storeShape.isRequired,
+        [subscriptionKey]: subscriptionShape
+    }
+    return Provider
+}
+export default createProvider()

src/containers/Commons/connect.js

@@ -0,0 +1,67 @@
+import connectAdvanced from '../components/connectAdvanced'
+import shallowEqual from '../utils/shallowEqual'
+import defaultMapDispatchToPropsFactories from './mapDispatchToProps'
+import defaultMapStateToPropsFactories from './mapStateToProps'
+import defaultMergePropsFactories from './mergeProps'
+import defaultSelectorFactory from './selectorFactory'
+
+function match(arg, factories, name) {
+    for (let i = factories.length - 1; i >= 0; i--) {
+        const result = factories[i](arg)
+        if (result) return result
+    }
+    return (dispatch, options) => {
+        throw new Error(`Invalid value of type ${typeof arg} for ${name} argument when connecting component ${options.wrappedComponentName}.`)
+    }
+}
+
+function strictEqual(a, b) { return a === b }
+
+// createConnect with default args builds the 'official' connect behavior. Calling it with
+// different options opens up some testing and extensibility scenarios
+export function createConnect({
+                                  connectHOC = connectAdvanced,
+                                  mapStateToPropsFactories = defaultMapStateToPropsFactories,
+                                  mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
+                                  mergePropsFactories = defaultMergePropsFactories,
+                                  selectorFactory = defaultSelectorFactory
+                              } = {}) {
+    return function connect(
+        mapStateToProps,
+        mapDispatchToProps,
+        mergeProps,
+        {
+            pure = true,
+            areStatesEqual = strictEqual,
+            areOwnPropsEqual = shallowEqual,
+            areStatePropsEqual = shallowEqual,
+            areMergedPropsEqual = shallowEqual,
+            ...extraOptions
+        } = {}
+    ) {
+        const initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps')
+        const initMapDispatchToProps = match(mapDispatchToProps, mapDispatchToPropsFactories, 'mapDispatchToProps')
+        const initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps')
+        return connectHOC(selectorFactory, {
+            // used in error messages
+            methodName: 'connect',
+            // used to compute Connect's displayName from the wrapped component's displayName.
+            getDisplayName: name => `Connect(${name})`,
+            // if mapStateToProps is falsy, the Connect component doesn't subscribe to store state changes
+            shouldHandleStateChanges: Boolean(mapStateToProps),
+            // passed through to selectorFactory
+            initMapStateToProps,
+            initMapDispatchToProps,
+            initMergeProps,
+            pure,
+            areStatesEqual,
+            areOwnPropsEqual,
+            areStatePropsEqual,
+            areMergedPropsEqual,
+            // any extra options args can override defaults of connect or connectAdvanced
+            ...extraOptions
+        })
+    }
+}
+
+export default createConnect()

src/entry.js

@@ -4,20 +4,16 @@ import { createStore, applyMiddleware, combineReducers } from 'redux'
 import { Provider } from 'react-redux'
 import { composeWithDevTools } from 'redux-devtools-extension'
 import thunk from 'redux-thunk'
-import { routerReducer, routerMiddleware } from 'react-router-redux'
-import { AppContainer } from 'react-hot-loader'
+import { routerReducer } from 'react-router-redux/lib/reducer'
+import AppContainer from 'react-hot-loader/lib/AppContainer'
 import App from './App'
-import createHistory from 'history/createBrowserHistory'
 import rootReducer from './reducers/index'
 
 const FastClick = require('fastclick')
 
-const history = createHistory()
-const middleware = routerMiddleware(history)
-
 //解决移动端300毫秒延迟
 FastClick.attach(document.body)
-const middlewares = [thunk, middleware]
+const middlewares = [thunk]
 
 const store = createStore(
     combineReducers({routing: routerReducer, ...rootReducer}),
@@ -39,6 +35,7 @@ render(App)
 if(module.hot) {
     module.hot.accept('./App', () => {
         const NextRootContainer = require('./App').default
+        console.log(NextRootContainer)
         render(NextRootContainer)
     })
 }

src/utils/PropTypes.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types'
+
+export const subscriptionShape = PropTypes.shape({
+  trySubscribe: PropTypes.func.isRequired,
+  tryUnsubscribe: PropTypes.func.isRequired,
+  notifyNestedSubs: PropTypes.func.isRequired,
+  isSubscribed: PropTypes.func.isRequired
+})
+
+export const storeShape = PropTypes.shape({
+  subscribe: PropTypes.func.isRequired,
+  dispatch: PropTypes.func.isRequired,
+  getState: PropTypes.func.isRequired
+})