(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'