开源软件名称：

saga-cli

开源软件地址：

https://gitee.com/jojowwbb/saga-cli

开源软件介绍：

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 默认模板项目

项目集成

//webpacknpm install --save-dev webpacknpm install --save-dev webpack-dev-server//react npm install --save react react-dom//router v4版本npm install --save react-router react-router-dom//reduxnpm install --save redux react-redux redux-saga//babelnpm 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模块直接生成Storevar 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>}