一脑慧、React+Redux 項(xiàng)目結(jié)構(gòu)
二、Redux 演變過程
1砰盐、React 項(xiàng)目構(gòu)建
通過 npm 安裝 React 腳手架 (本示例使用 react ^16.7.0)：
$ npm i create-react-app -g
$ create-react-app sample
$ cd sample
安裝 redux 支持庫(kù)：
$ npm i redux react-redux --save-dev
本示例版本分別為：
- redux：^ 4.0.1
- react-redux：^ 6.0.0
2闷袒、React 項(xiàng)目結(jié)構(gòu)
// 這是一個(gè) React 項(xiàng)目的目錄結(jié)構(gòu)
├─ app.js 整個(gè)應(yīng)用的入口
├─ views/ 應(yīng)用中某個(gè)頁(yè)面的入口文件，一般為路由組件岩梳。
│ ├─ Home.js 例如囊骤，首頁(yè)的入口就是Home.js
│ ├─ Home.css Home頁(yè)面對(duì)應(yīng)的樣式
│ └─ HomeRedux.js Home頁(yè)面中所有與redux相關(guān)的reducer,action creator的匯總，即components/Home下所有*Redux.js的匯總冀值。
├─ components/ 所有應(yīng)用的組件
│ ├─ Home/ 例如也物，views/中含有一個(gè)名為Home的view，則在components/中就有一個(gè)名為Home的子文件夾列疗。
│ │ ├─ Table.js Home界面中的一個(gè)列表組件滑蚯。
│ │ ├─ Table.css 列表組件對(duì)應(yīng)的樣式
│ │ ├─ TableRedux.js 列表組件的reducer,action creator 及action type，整合在同一個(gè)文件中。
│ │ ├─ TodoItem.js
│ │ ├─ TodoItem.css
│ │ └─ TodoItemRedux.js
│ └─ Shared/ 不歸屬與任何view的組件告材。例如一些公共組件坤次。
├─ containers/
│ ├─ DevTools.js 配置DevTools
│ └─ Root.js 一般被app.js依賴，用于根據(jù)環(huán)境判斷是否需要加載DevTools斥赋。
├─ layouts/ 布局相關(guān)的組件及樣式缰猴，如菜單，側(cè)邊欄疤剑，header,footer等滑绒。
├─ redux/ Redux Store 相關(guān)的配置
│ ├─ reducers.js 整個(gè)應(yīng)用中所有reducer的匯總
│ └─ store.js 整個(gè)項(xiàng)目的store
├─ routes/ 路由相關(guān)的配置
├─ utils/ 工具函數(shù)，常量等
├─ styles/ 全局公共樣式
├─ app.css 應(yīng)用主樣式
3骚露、bootstrap 簡(jiǎn)單引用
安裝 bootstrap 支持庫(kù)：
$ npm i bootstrap
在項(xiàng)目頂層組件中引入即可蹬挤，如：
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;
