基于React+Router+Redux+Sagas+fetch+ant Design +less + es6+mockjs的项目过程总结

app.js是首页面，路由放此。 sagas在此页面被引用。 import rootSaga from './sagas' const store = configureStore(initialState) store.runSaga(rootSaga); 

---

1）FL.js     修改对应的接口Path值，便于后期对接口地址的管理。

SupSearch:'/api/Order/supSearch.json',
SupState:'/api/Order/supState.json',

2）sagas   中间件，只会在应用启动时调用（但初始启动的sagas可能会动态的调用其它sagas），用于监听发起的action，然后决定这个action用来做什么。 如：1.发起一个异步调用（ajax请求） 2.发起其它的action到store。 3.调用其它的sagas index.js里面放所有的sagas。

import { watchGetAccountSaga } from './account'
import {supSearch} from './supSearch'
export default function* rootSaga() {yield [// 更多
        watchGetAccountSaga(),supSearch(),]
}

子saga：有两个Generator函数。其中一个通过while（true），take方法来一直监听action。 只有当此事件被dispatch则fork第二个Generator函数。（此步骤避免了同时发起多个不必要的请求。 只有当view页面componentWillMount 才触发此action，发起请求。）

componentWillMount(){  this.props.initialDispatch()},

import { SUPSEARCHACTION, supSearchSucceed,supSearchFailed} from '../actions/sup'
export function* supSearch() {while (true) {yield take(SUPSEARCHACTION)yield fork(fetchSupSearchApi)}
}

第二个Generator方法主要用来生成fetch请求。 任务要被beginTask和endTask包裹。在请求成功之后，将请求到的数据dispatch一个对应的action（成功：supSearchSucceed(res) ） 失败（supSearchFailed(e) ）。

function* fetchSupSearchApi(){try {yield put( beginTask() )const response = yield call(fetch, FL.PATH.API.SupSearch)const res = yield response.json()if (!res) {return false} else {yield put( supSearchSucceed(res) )   （成功）}} catch (e) {yield put( supSearchFailed(e) )   （失败）} finally {yield put( endTask() )}
}

mockjs也是放在此文件中。 // mock 代码放在 __DEBUG__ 代码块内，生产环境会删除代码块

if (__DEBUG__) {let data = Mock.mock({'Status': '200','Position': '001','ErrorCode': '001','Data|1-10': [{'productNumber': /[A-Z][A-Z]\d{3}[a-z]\d{3}/,'productName': '@ctitle(3, 5)','supplierName': '@ctitle(3)','productStockStatus|1-100': 1,'faceValue|1-1000': 1,'productPrice|1-100': 1,'type|1-4': 1,'averageChargeTime':'@natural(0,200)'+'min','complaintRate':'@natural(0,100)'+'%','successRate': '@natural(0,100)'+'%','today|1-100': 1,'week|1-1000':1 ,'month|1-10000': 1,'purchaseApplyStatus': '@boolean()'}]});fetchMock.mock(FL.PATH.API.SupSearch, data);// fetchMock.mock(FL.PATH.API.ACCOUNT, 404);
}

 

3）action 在对应的action文件sup.js中，

export const SUPSEARCHACTION = 'SUPSEARCHACTION'
export const SUPSEARCH_SUCCEED = 'SUPSEARCH_SUCCEED'
export const SUPSEARCH_FAILED = 'SUPSEARCH_FAILED'

 

分别对应触发，请求成功、请求失败的action：

export function supSearchAction(){return {type:SUPSEARCHACTION}
}
export function supSearchSucceed(items){return {type:SUPSEARCH_SUCCEED,items}
}
export function supSearchFailed(error) {return {type: SUPSEARCH_FAILED,error,}
}

 

4）reducer index.js中为总reducer。通过import将各个reducer引入进来，通过combineReducer将各个子reducer结合起来。configureStore.js中引入此rootReducer。

import supSearch from './supSearch'
import supState from './supState'const rootReducer = combineReducers({routing: routerReducer,supSearch,supState,
})export default rootReducer

 

将action的三种type值引入，触发不同的type值会有不同的处理。 1、当触发SUPSEARCHACTION时，将isfetching设为true，代表开始请求数据。 2、当触发SUPSEARCH_SUCCEED时，将isfetching设为false，代表请求完成，成功，并将请求到的参数返回给items，items的值同步到state当中。 3、当触发SUPSEARCH_FAILED时，将isfetching设为false，代表请求完成，失败。返回错误。

import {SUPSEARCHACTION,SUPSEARCH_SUCCEED,SUPSEARCH_FAILED} from '../actions/sup'export default function supSearch (state = {}, action) {switch (action.type) {case SUPSEARCHACTION:return {...state,isfetching:true,}case SUPSEARCH_SUCCEED:return {...state,isfetch:false,items: action.items,}case SUPSEARCH_FAILED:return {...state,isfetching: false,error: action.error,};default:return state}
}

 

5）containers 用于将state进行处理，处理好的数据通过connect传递给component中的view页面  涉及到reselect（创建选择器）。

import { connect} from 'react-redux'  
import SupSearch from '../components/SupSearch/js/SupSearch'
import {supSearchAction} from '../actions/sup' 
import {createSelector } from 'reselect'const defaultValue = [];
const stateItemSelector = (state) =>state.supSearch.items || defaultValue
const stateSelector = createSelector ([stateItemSelector],(stateItem) => {return stateItem}
)
const mapStateToProps = (state) =>{return {items:stateSelector(state),}
}
const mapDispatchToProps = (dispatch) =>{return {initialDispatch(){dispatch(supSearchAction())},}
}
export default connect(mapStateToProps,mapDispatchToProps
)(SupSearch)

6)component 此部分即为view模块。只有当组件即将被渲染时，才发起action，触发saga部分的yield take(SUPSEARCHACTION) initialDispatch方法即为5）中mapDispatchToProps传过来的方法。

componentWillMount(){this.props.initialDispatch()},

 

转载于:https://www.cnblogs.com/mian-bread/p/6094126.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！