REACT-SAGA 入门项目搭建笔记

用于学习记录

项目地址：开源中国

Install

Core Lib

//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 

Plugins

Webpack-Browser-Plugin

用于自动打开浏览器

 new WebpackBrowserPlugin() 

Html-Webpack-Plugin

用于动态生成index入口页面

  new HtmlWebpackPlugin({     title: 'Development'   }) 

Clean-Webpack-Plugin

清空webpack某个目录、一般用于构件项目之前清空项目输出目录，如：

new CleanWebpackPlugin(['dist']), 

Loader

用于编译jsx、es6、react代码的loader

rules: [{           test: /.jsx?$/,           exclude: /node_modules/,           use: [{               loader: "babel-loader"           }],       }] 

Init

初始化核心对象

Saga

集中管理action分发、调用

/** - saga 集中管理action分发、异步操作 - action约定： -       type: -           异步：FETCH_${ACTION.TYPE} -           同步：LOCAL_${ACTION.TYPE} -            -       asyn:true|false      -       data:Object -   */  import {fork,put,take,call} from 'redux-saga/effects' import util from './util'  /** - 加载数据方法 - 在这里、我们可以集中调用真实的API接口 - 我们可以把action type 和 api url 做个映射 - 这样的话、我们可以减少重复的调用接口方法 - @Author   WangBing - @DateTime 2017-11-07 - @returns  {[type]}   [description]  */ function load(data){     return new Promise((resolve,reject)=>{         setTimeout(()=>{             resolve(data);         },100)     }) }  /** - 用于开发调试的工具函数 - @Author   WangBing - @DateTime 2017-11-07 - @param    {[type]}   action [description] - @returns  {[type]}          [description]  */ function logger(action){     console.log(`dispatche action`);     console.dir(action) }   /** - 异步加载数据 - @Author   WangBing - @DateTime 2017-11-07 - @param    {[type]}   action        [description] - @yields   {[type]}   [description]  */ function* asynLoader(action){     try{         var result=yield call(load,action.data);         yield put({             type:util.success(action.type),             data:result         })         return result;     }catch(e){         console.error('run action:'+action.type);         console.error("action load error with a exception")         console.error(e)     } }   /** - 定义一个Watcher监控所有类型的action - @Author   WangBing - @DateTime 2017-11-07 - @yields   {[type]}   [description]  */ function* watcher(){     while(true){         const action=yield take("*");         logger(action);         if(action.sync){             yield put(action);         }else{             yield call(asynLoader,action);         }     } }  export default function* rootSaga(){     yield fork(watcher); } 

Store

初始化store

import {createStore,applyMiddleware} from "redux"; import createSagaMiddleware from 'redux-saga';  import RootReducer from './reducer';  var sagaMiddleware=createSagaMiddleware();  var store=createStore(RootReducer,applyMiddleware(sagaMiddleware));  export default {     ...store,     run:sagaMiddleware.run } 

Reducer

分模块初始化reducer

import { combineReducers } from 'redux'  import AppReducer from 'src/router/reducer'; import HomeReducer from 'src/router/home/reducer';  export const RootReducer=combineReducers({     app:AppReducer,     home:HomeReducer })  export default RootReducer 

Build Performance

Devtool

不同的devtool模式、有不用的效果、需要合理设置

开发环境推荐：

cheap-module-eval-source-map

生产环境推荐：

cheap-module-source-map