React+Redux项目实战总结

本项目实战是简化版的大众点评wap版

技术栈

react + redux + react-router-dom
mock数据使用的是 koa + koa-router

项目源码：https://github.com/volcanoliuc/dianpingapp

项目结构

├── app ?? #项目主目录
│ ├── index.jsx ?? # 项目的入口index
│ ├── index.tmpl.html ?? # html生成模板
│ ├── actions ?? # redux action
│ ├── component ?? # 组件文件夹（木偶组件）
│ ├── config
│ ├── contianer ?? # 组件文件夹（智能组件）
│ │ ├── index.jsx
│ │ ├── 404.jsx ?? # 404页面
│ │ ├── City ?? # 选择城市
│ │ ├── Detail ?? # 商户详情页
│ │ ├── Home ?? # 首页
│ │ ├── Login ?? # 登录页
│ │ ├── Search ?? # 搜索结果页
│ │ └── User ?? # 用户中心页
│ ├── contant ?? # actionType
│ ├── fetch ?? # 请求服务API
│ ├── config
│ ├── reducers
│ ├── router ?? #路由配置
│ ├── static ?? # 静态文件
│ ├── store
│ └── util ?? # 工具方法
├── docs
├── mock ?? # mock数据
│ ├── server.js
│ └── ...
└── test

遇到的问题及解决方法

1.react-router-dom 4.0
路径跳转问题：
react-router-dom 4.0无法通过导入browserHistory进行跳转

解决方案一：
通过react-router-dom history进行跳转：this.props.history.push(‘/‘)

• 配置在Route下的组件可以直接调用this.props.history

• 未配置在Route下的组件需要用withRouter高阶组件把组件包裹起来

  import {withRouter} from ‘react-router-dom‘
  ... 
  class App extends React.Component{
    handleClick(){
  this.props.history.push(‘/‘)
    }
    ...
  }
  export default withRouter(App)

  解决方法二：
  react-router v4 在 Router 组件中通过Context暴露了一个router对象，可以在子组件中使用Context获取router对象，因为react不推荐使用Context,所以这种方法慎用，具体实现自行搜索 - -#

2.node后端接收post请求参数
一、koa后端无法直接读取post传过去的参数所以需要定义一个方法去解析post参数。

//解析传入的post参数
const parsePostData = ( ctx ) =>  {
  return new Promise((resolve, reject) => {
    try {
      let postdata = "";
      ctx.req.addListener(‘data‘, (data) => {
        postdata += data
      })
      ctx.req.addListener("end",function(){
        let parseData = parseQueryStr( postdata )
        resolve( parseData )
      })
    } catch ( err ) {
      reject(err)
    }
  })
}
//把传入的参数解析成对象
const parseQueryStr = ( queryStr ) =>  {
  let queryData = {}
  let queryStrList = queryStr.split(‘&‘)
  console.log( queryStrList )
  for (  let [ index, queryStr ] of queryStrList.entries()  ) {
    let itemList = queryStr.split(‘=‘)
    queryData[ itemList[0] ] = decodeURIComponent(itemList[1])
  }
  return queryData
}

只需要把koa ctx 直接传入parsePostData就可以得到一个post请求的参数

let postData = await parsePostData( ctx )

二、使用koa-bodyparser中间件
对于POST请求的处理，koa-bodyparser中间件可以把koa2上下文的formData数据解析到ctx.request.body中

 npm install --save koa-bodyparser@3  //安装

...
// 使用ctx.body解析中间件
app.use(bodyParser())
...
let postData = ctx.request.body

更多关于koa的学习资料可以参考Koa2进阶学习笔记

总结

本次项目从零配置整个项目的结构，主要是让自己了重新理解了react + redux + react-router 全家桶开发模式。