Saga-Cli

版本:1.0.6

用于快速创建React Saga项目

Install

npm install -g saga-cli

Start

直接开始:初始化一个纯净的项目(只有核心代码、推荐大神使用)

saga-cli init TestProject

或者

(推荐) 初始化一个带默认示例的业务项目(saga、router、bundle都集成了)

saga-cli demo TestProject

或者查看帮助

saga-cli --help

Example

  随便进入到一个目录:
    $ saga-cli init SagaTest
  执行完成后:
    $ cd SagaTest
    $ npm install
  启动项目:
    $ npm run dev      //开发环境
  或者:
    $ npm run build    //用于生产环境代码打包

SAGA-CLI 默认模板项目

项目集成

//webpack
npm install --save-dev webpack
npm install --save-dev webpack-dev-server

//react 
npm install --save react react-dom
//router v4版本
npm install --save react-router react-router-dom
//redux
npm install --save redux react-redux redux-saga

//babel
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015 babel-preset-stage-0 babel-preset-stage-3

项目结构

project
│  .babelrc
│  .gitignore
│  package.json
│  README.md
│  test.txt
│  webpack.config.js
│  
└─src
    │  app.jsx                            # 项目初始化
    │  main.jsx                           # 项目入口
    │  template.html                  # 自动生成页面的模板
    │  
    ├─common
    │  │  util.js                       # Redcer工具方法
    │  │  wish.js                       # 自用工具方法：fetch
    │  │  
    │  ├─api
    │  │      index.js                  # action type映射接口url
    │  │      
    │  └─styles
    │          app.less
    │          theme.less
    │          
    ├─layout
    │  │  Header.jsx                    # 布局组件（业务相关）
    │  │  RouteLayout.jsx               # 根路由配置组件（业务相关）
    │  │  SilderLayout.jsx              # 侧边栏组件（业务相关）
    │  │  
    │  └─styles
    │          layout.less
    │          
    ├─router                            # 由于这里按路由划分模块、所以使用router命名
    │  │  reducer.js                    # 模块公用的reducer
    │  │  
    │  ├─about
    │  │      index.jsx                 # about业务模块组件、没有实际业务
    │  │      
    │  └─home
    │      │  actions.jsx               # home模块的actions配置
    │      │  index.jsx                 # home模块的主业务容器组件
    │      │  reducer.js                # home模块的reducer定义
    │      │  
    │      ├─components                   # home模块的所用到的组件
    │      │      ArticleCollect.jsx
    │      │      ArticleEdit.jsx
    │      │      ArticleList.jsx
    │      │      
    │      └─styles
    │              index.less
    │              
    └─saga
            core.js                     # saga核心包

说明

部分代码说明

初始化Saga

/**
 * 我封装的常用工具方法
 * 1 axios封装的fetch
 */
import wish from 'src/common/wish';

/**
 * 我封装的SagaCore模块
 * 1 创建Store
 * 2 创建Saga
 * 3 内置默认reducer信息
 */
import SagaCore from 'src/saga/core';

/**
 * 接口url和action type的映射关系模块
 */
import urls from 'src/common/api/index';

/**
 * 所有模块的reducer
 */
import AppReducer from 'src/router/reducer';
import HomeReducer from 'src/router/home/reducer';

const reducer={
    app:AppReducer,
    home:HomeReducer
}

wish.bindUrls(urls);
wish.create();

//通过SagaCore模块直接生成Store
var Store=SagaCore.init(reducer,function(action={data:{}}){
    return wish.fetch({name:action.type,...action.data},action.method).then((res)=>res);
})

新增Reducer

在main.jsx中直接引入，如：

import AppReducer from 'src/router/reducer';
import HomeReducer from 'src/router/home/reducer';

+import UserReducer from '...'

const reducer={
    app:AppReducer,
    home:HomeReducer,
+   user:UserReducer
}

按需加载

/**
 * 加载模块的根业务组件
 */
import HomeContainer from 'bundle-loader?lazy!src/router/home/index';
import AboutContainer from 'bundle-loader?lazy!src/router/about/index';


/**
 * Bundle加载业务组件
 * @Author   WangBing
 * @DateTime 2017-11-24
 * @param    {[type]}   props [description]
 * @returns  {[type]}         [description]
 */
const RouterHome=(props)=>{
    return 
        {(Container) => }
    
}

const RouterAbout=(props)=>{
    return 
        {(Container) => }
    
}


/**
 * 按照正常路由配置、配置组件
 * @Author   WangBing
 * @DateTime 2017-11-24
 * @returns  {[type]}   [description]
 */
export default () => {
    return 
            
            
            
        

}