基于react15.6重构项目（上手使用篇）-白红宇

（ps：该篇章为工作笔记，供开发同事参考使用）

目录结构

项目的业务代码目录结构如下

新建一个页面组件

例如要新建一个 product 页面,首先在pages下新建一个 product 文件夹,然后在product下新建一个index.js、index.scss

index.js

import React from 'react'import PropTypes from 'prop-types'import {requestPath, connect} from 'utils'import { Carousel } from 'antd-mobile'import "./index.scss"@connect('/productDetail/:id', 'ProductDetailState', 'fetchProductDetail')/**connect 是对react-redux的进一步封装*使用：第一个参数为当前页面的路由（注意，有路由参数的也要带上，跟router配置中的路由一致）*第二个参数：相当于mapStateToProps中返回的键名*第三个参数：相当于mapActionToProps中返回的键名**/class ProductDetail extends React.Component{    //prop接受的数据都需要用prop-type来验证    static propTypes={        ProductDetailState:PropTypes.object.isRequired,        routeParams:PropTypes.object.isRequired,    }    constructor(props){        super(props)        this.state={            data: ['', '', ''],            imgHeight: 176,        }    }    componentWillMount=()=>{        requestPath('ProductDetail')        console.log(this.props.ProductDetailState)        console.log(this.props.routeParams.id)    }    render(){        return (            
    
                     {/*ui代码*/}            
    
        )    }}export default ProductDetail;复制代码

相应的app文件夹下也需要增加一些文件以及修改一些配置

action文件夹下新建一个 product.js 文件,主要是定义一些action事件

// import { request } from 'utils'import * as types from 'app/constants/ActionTypes'// import { handleResp } from 'utils'// import 'mapi/productHttp.getProductDetailV2'export default function fetchProductDetail(data) {    return (dispatch) => {        setTimeout(()=>{            dispatch(receiveProductDetail(data))        },1000)    }} function receiveProductDetail(data) {    return {        type: types.FETCH_PRODUCTDETAIL,        data,    }}复制代码

同时再action文件夹下的index.js做如下配置

import fetchHome from './home.js'import fetchProductDetail from './productDetail.js'export {    // 首页    fetchHome,    fetchProductDetail,}复制代码

reducer目录下新建一个product.js文件

import * as types from '../constants/ActionTypes.js'const initialState = {    ProductDetailState:'hellosanbao',}export default function receivehome(state = initialState, action) {    switch (action.type) {    case types.FETCH_CARTLIST:        return Object.assign({}, state, action.data)    default:        return state    }}复制代码

同时再reducer目录下的index.js做如下修改

import { combineReducers } from 'redux'import { routerReducer } from 'react-router-redux'import HomeState from './home.js'import ProductDetailState from './productDetail.js'const rootReducer = combineReducers({    HomeState,    CenterState,    ProductDetailState,    routing: routerReducer,})export default rootReducer复制代码

最后别忘了添加actiobType

在constans目录下的ActionTypes.js加入如下配置

export const RECEIVE_HOME = 'RECEIVE_HOME'export const FETCH_PRODUCTDETAIL = 'FETCH_PRODUCTDETAIL'复制代码