一、React+Redux 项目结构

一、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;