快速生成 React Redux-saga 项目 saga-cli

码农软件 · 软件分类 · 项目构建 · 2019-11-15 14:44:29

软件介绍

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 
            
            
            
        

}

本文地址:https://www.codercto.com/soft/d/19047.html

Practical Vim, Second Edition

Practical Vim, Second Edition

Drew Neil / The Pragmatic Bookshelf / 2015-10-31 / USD 29.00

Vim is a fast and efficient text editor that will make you a faster and more efficient developer. It’s available on almost every OS, and if you master the techniques in this book, you’ll never need an......一起来看看 《Practical Vim, Second Edition》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具