git clone https://github.com/hyy1115/react-redux-webpack.git
 
 
 服务端项目，具体安装教程看 https://github.com/hyy1115/node-express-server
 git clone https://github.com/hyy1115/node-express-server.git 

npm install 或者cnpm install

 mac
 npm run start-mac
 
 windows
 npm run start-win

http://localhost:9009

9009是node服务器的端口号，你最好先运行我发布的node开源项目，然后再和你的node合并解决方案。  

为什么是访问服务器端口而不是前端开启的端口呢？

这里涉及到跨域问题，跨域的本质就不说了，说说我的解决办法，我把index.html放在服务器端，每次请求服务器端口地址的时候，都将会返回一个html，这个html
中的script标签会链接3011端口的mobile.bundle.js，这样就很巧妙的解决了跨域的问题，同时还能保证前端代码热更新可用。

mac
npm run build-mac

windows
npm run build-win

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

@connect(
    state => state,
    dispatch => bindActionCreators(。。。, dispatch)
)
export class HomeContainer extends Component {

    constructor(props) {
        super(props);
    }

    componentWillMount() {
        
    }

    render() {
        return(
            <div className="">
                这里调用导入的各个子组件模块
            </div>
        );
    }
}

    import React from 'react';
    import { Route } from 'react-router';
    
    /* containers */
    import { AppContainer } from 'appContainer';
    import { HomeContainer } from 'containers/Home/homeContainer';
    
    export default (
        <Route path="/" component={AppContainer}>
            <Route path="home" component={HomeContainer} />
        </Route>
    );

componentWillMount() {
        const { navMain } = this.props.nav //这个叫做es6的解构赋值
        if (navMain.length === 0) {
        //如果state中的navMain对象为空，则调用getNav方法
            this.props.getNav();
        }
    }

import { getData, postData } from 'utils/fetchData'

//这个叫做action，用于更新reduer中的state
const receiveNav = (response) => {
    return {
        type: 'RECEIVE_NAV',
        navMain: response.data
    }
}
//获取服务器的参数，并且返回一个异步的dispatch，dispatch的对象是自己定义的action
export const getNav = () => {
    return async (dispatch) => {
        try {
            let response = await getData(`/book/navigation`)
            await dispatch(receiveNav(response))
        } catch (error) {
            console.log('error: ', error)
        }
    }
}

// 初始化状态
let initNavList = {
    navMain: []
}

export function nav(state = initNavList, action) {
    switch (action.type) {
        case 'RECEIVE_NAV':
            return {
                ...state,   //三个点是展开符
                navMain: action.navMain
            }

        default:
            return {...state};
    }
}

import { combineReducers } from 'redux';
import { routeReducer } from 'redux-simple-router';
import {reducer as formReducer} from 'redux-form';

import { nav } from './nav';

//注册reducer，每个自定义的reducer都要来这里注册！！！不注册会报错。
const rootReducer = combineReducers({
  form: formReducer,
  routing: routeReducer,
  /* your reducers */
  nav, //导航相关
});

export default rootReducer;