React-redux+express项目架构及优化

创建react项目比较难着手的原因之一就是项目的架构，这里我以一个博客系统的搭建为例

当然，create-react-app 这个工具可以帮你快速创建一个react项目，但我个人觉得还是自己搭建一个模板比较好理解

我们的博客系统目录结构

• node_modules是自动生成的存放npm引入的模块文件
• public用来存放静态文件
• server存放数据库的相关文件

npm5.0版本的新变化

1. 使用npm install xxx命令安装模块时，不再需要--save选项，会自动将模块依赖信息保存到 package.json 文件；
2. 安装模块操作（改变 node_modules 文件夹内容）会生成或更新 package-lock.json 文件
3. 发布的模块不会包含 package-lock.json 文件
4. 如果手动修改了 package.json 文件中已有模块的版本，直接执行npm install不会安装新指定的版本，只能通过npm install xxx@yy更新
   重新安装模块之所以快，是因为 package-lock.json 文件中已经记录了整个 node_modules 文件夹的树状结构，甚至连模块的下载地址都记录了，再重新安装的时候只需要直接下载文件即可

这里踩了一个坑

项目中有package-lock.json文件，再添加其他的npm包会报错

删除package-lock.json文件，重新运行npm install 命令就可以了

• server.js为服务器文件
• webpack.config.js 为 webpack的配置文件

整个项目开发中，public中的文件结构每个人创建的可能都不一样，以下为我们的项目示例

dist中为webpack打包的出口文件
优化之前的代码action是包含在components中，componemts中的文件调用自身的action，这种写法不利于后期维护，将代码重构后，提取action放在一個新的文件夹中，在components中调用相应的action，实现了状态与展示分离．

JS目录

action为页面产生的动作，以登陆为例其action为

export const signIn = (signInInfo) => ({
    type: 'SIGN_IN',
    signInInfo
});

components是静态组建，只负责展示页面内容

import React from 'react';
import PropTypes from 'prop-types';

export default class Login extends React.Component {

    render() {
        const {onClickSignIn} = this.props;
        return (
            <div>
                <form>
                    <label htmlFor="name">用户名：</label>
                    <input type="text" name="name" id="name"/>
                    <br />
                    <label htmlFor="password">密码：</label>
                    <input type="password" name="password" id="password" />
                    <input type="button" value="登录" onClick={onClickSignIn} />
                </form>
            </div>
        );
    }
};
Login.propTypes = {
    onClickSignIn: PropTypes.func.isRequired
};

containers为容器组件负责管理数据和业务逻辑，不负责 UI 的呈现，其中包含两个重要函数 mapStateToProps 和 mapDispatchToProps
具体用法可以参考http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

middlewares是中间件，在页面出发action之后，重新渲染页面之前可以在中间件中进行操作，一般用来向后台发送ajax请求

reducers用来返回一个新的状态，用来重新渲染界面

main.js文件引入前边的containers和middlewares中的文件，渲染进静态文件index.html中

dbs中为数据库的连接文件及SQL语句，这里把数据库连接文件贴出来供小可爱们参考

const mysql = require('mysql');

var connection = mysql.createConnection(
    {
        host: 'localhost',
        user: 'root',
        password: "yourpassword",
        database: 'yourdatabaseName',
        port: 3306
    });
connection.connect((err)=> {
    if (err) {
        console.log('err' + err.stack);
        return;
    }
    console.log('connected success!!!');
});
module.exports = connection;

routers为后台文件，用来接收ajax请求，对数据库进行操作，并返回相应的数据，在这里返回之后就可以得到数据对页面重新渲染啦