# saga-cli

**Repository Path**: DaLangYangFan_admin/saga-cli

## Basic Information

- **Project Name**: saga-cli
- **Description**: 快速生成React Redux-saga项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2019-11-06
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 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 <Bundle load={HomeContainer}>
        	{(Container) => <Container {...props}/>}
      	</Bundle>
    }

    const RouterAbout=(props)=>{
    	return <Bundle load={AboutContainer}>
        	{(Container) => <Container {...props}/>}
      	</Bundle>
    }


    /**
     * 按照正常路由配置、配置组件
     * @Author   WangBing
     * @DateTime 2017-11-24
     * @returns  {[type]}   [description]
     */
    export default () => {
    	return <Switch>
    	        <Route exact path="/"  component={RouterHome}/>
    	        <Route path="/home"  component={RouterHome} />
    	        <Route path="/about"   component={RouterAbout} />
            </Switch>

    }