如何合理布置React/Redux的目录结构

Question

如何合理布置React/Redux的目录结构

Answer 1

这种结构谐在让程序更容易扩展├── src # 程序源文件│ ├── main.js # 程序启动和渲染│ ├── components # 全局可复用的表现组件(Presentational Components)│ ├── containers # 全局可复用的容器组件│ ├── layouts # 主页结构│ ├── store # Redux指定块│ │ ├── createStore.js # 创建和使用redux store│ │ └── reducers.js # Reducer注册和注入│ └── routes # 主路由和异步分割点│ ├── index.js # 用store启动主程序路由│ ├── Root.js # 为上下文providers包住组件│ └── Home # 不规则路由│ ├── index.js # 路由定义和代码异步分割│ ├── assets # 组件引入的静态资源│ ├── components # 直观React组件│ ├── container # 连接actions和store│ ├── modules # reducers/constants/actions的集合│ └── routes ** # 不规则子路由(** 可选择的)routes 作为主入口。export const createRoutes = (store) => ({path: '/',component: CoreLayout,indexRoute: Home,childRoutes: [CounterRoute(store),ZenRoute(store),ElapseRoute(store),RouteRoute(store),PageNotFound(),Redirect]})一个Counter 模块包含了自身的assets，components，containersCounter/components/ # 页面的组件containers/ # view 和 modules 数据对接modules/ # 包含对应的 reducer, actionindex.js # 页面入口，定义pathindex.js 自动的注入reducer 到store，这样在顶层的store就无需要手动去整合每个模块自身的reducer。代码如下：// 导入对应的redicerconst reducer = require('./modules/counter').default/* Add the reducer to the store on key 'counter' */injectReducer(store, { key: 'counter', reducer })