web版云盘总结

1）项目结构

常见单页面的redux项目，结构为：

|.
├── config    // 打包的配置文件
├── dist
├── node_modules
├── package.json
├── readme.md
├── server
└── src    // 开发目录

其中src目录为：

├── components    // 与redux无关的组件
├── constant      // 常量，一般大写声明
├── containers    // 与redux相关的组件，一般为项目模块
├── index.html    // 入口模版文件
├── index.js      //
├── middleware    // 自定义的中间件
├── redux         // 存放store，action，reducer；分模块划分redux
├── route         // 路由
└── static        // 公用的静态js，css，images

其中redux目录为：

.
├── createStore.js    // import各种(异步)中间件，Reducers，创建store
└── module            // 按模块划分的action和reducer
    ├── Contact
    │   ├── curr.js   // action和reducer写在一个文件中
    ├── Desk
    │   └── getIndexSetting.js
    └── index.js      // import模块中的reducer，export combineReducers 

2）中间件

A thunk is a function that wraps an expression to delay its evaluation.

a.用到的中间件：

1. redux-thunk 支持异步action

// action 的命名根据模块来区分
// 例如：const USERINFO = 'contact/USERINFO'
export const test = (params)=> {
      return (dispatch, getState)=> {
            // do something
            dispatch(otherAction)
      }
}

2.redux-promise-middleware

const store = createStore(reducers, {}, applyMiddleware(
  thunkMiddleware,
  errorMiddleware,
  promiseMiddleware(),
  loggerMiddleware
));