一、React+Redux 项目结构
二、Redux 演变过程
1、React 项目构建
通过 npm 安装 React 脚手架 (本示例使用 react ^16.7.0)：
$ npm i create-react-app -g
$ create-react-app sample
$ cd sample
安装 redux 支持库：
$ npm i redux react-redux --save-dev
本示例版本分别为：
- redux：^ 4.0.1
- react-redux：^ 6.0.0
2、React 项目结构
// 这是一个 React 项目的目录结构
├─ app.js 整个应用的入口
├─ views/ 应用中某个页面的入口文件，一般为路由组件。
│ ├─ Home.js 例如，首页的入口就是Home.js
│ ├─ Home.css Home页面对应的样式
│ └─ HomeRedux.js Home页面中所有与redux相关的reducer,action creator的汇总，即components/Home下所有*Redux.js的汇总。
├─ components/ 所有应用的组件
│ ├─ Home/ 例如，views/中含有一个名为Home的view，则在components/中就有一个名为Home的子文件夹。
│ │ ├─ Table.js Home界面中的一个列表组件。
│ │ ├─ Table.css 列表组件对应的样式
│ │ ├─ TableRedux.js 列表组件的reducer,action creator 及action type，整合在同一个文件中。
│ │ ├─ TodoItem.js
│ │ ├─ TodoItem.css
│ │ └─ TodoItemRedux.js
│ └─ Shared/ 不归属与任何view的组件。例如一些公共组件。
├─ containers/
│ ├─ DevTools.js 配置DevTools
│ └─ Root.js 一般被app.js依赖，用于根据环境判断是否需要加载DevTools。
├─ layouts/ 布局相关的组件及样式，如菜单，侧边栏，header,footer等。
├─ redux/ Redux Store 相关的配置
│ ├─ reducers.js 整个应用中所有reducer的汇总
│ └─ store.js 整个项目的store
├─ routes/ 路由相关的配置
├─ utils/ 工具函数，常量等
├─ styles/ 全局公共样式
├─ app.css 应用主样式
3、bootstrap 简单引用
安装 bootstrap 支持库：
$ npm i bootstrap
在项目顶层组件中引入即可，如：
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Home from './views/Home/Home';
class App extends Component {
render() {
return (
<Home />
);
}
}
export default App;
