基于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 (
            <div className="product-detail-wrap">
                {/*ui代码*/}
            </div>
        )
    }
}
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'
复制代码

转载于:https://juejin.im/post/5a4af6f0f265da432e5c5e07