react+react-router+react-redux全家桶小项目开发过程分享

前端之家收集整理的这篇文章主要介绍了react+react-router+react-redux全家桶小项目开发过程分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

react-ele-webapp

项目地址 :https://github.com/kliuj/reac...

run

下载完项目

npm install

然后

npm run dev 即可

基于 react react-router redux 的项目,主要是为了学习实战react。数据都是固定的,从饿了么接口临时抓的,模拟了一个0-100ms的异步数据延迟,感谢饿了么。

以下内容是项目开发的过程和一些思考,按照这个过程至少能保证实现一个相对完整的react全家桶项目

内容参考

react文档:http://reactjs.cn/react/docs/...

react-router 文档地址 :https://reacttraining.com/rea...

react-router 中文版参考:http://www.uprogrammer.cn/rea...

redux文档参考:http://redux.js.org/

redux中文文档:http://cn.redux.js.org/

搭建项目:

建立项目目录,安装package.json,配置webpack.config
做好基础依赖工作,摘自package.json的一部分内容

  1. "devDependencies": {
  2. "babel-core": "^6.23.1","babel-loader": "^6.4.0","babel-preset-es2015": "^6.22.0","babel-preset-react": "^6.23.0","html-webpack-plugin": "^2.28.0","jshint": "^2.9.4","jshint-loader": "^0.8.4","react": "^15.2.0","react-dom": "^15.2.0","react-router": "^2.0.0","redux": "^3.6.0","webpack": "^2.2.1","webpack-dev-server": "^2.4.1"
  3. } //JAVASCRIPT

项目模块结构组织一些基础工作

开始进行开发一个项目除了技术选型之外,还有许多基础东西要先设计好,一个好的组织设计要可以为以后的提高工作效率。我这方面还有很多欠缺,目前主要考虑了3个模块的设计:

1:后台接口通信层:model.js 主要处理统一接口的请求发送和回调,放在一起更有利于后期维护,也增加可阅读性

  1. //接口对应的url,这里只做演示
  2. const uris = {
  3. index_entry : fetchData.index_entry,hot_search_words : fetchData.hot_search_words
  4. }
  5. //接口调用
  6. export default function send(url,postData,successCallback,errCallback){
  7. //模拟延迟,假接口
  8. let promise = new Promise(function(resolve,reject){
  9. setTimeout(function(){
  10. resolve(fetchData[url])
  11. },Math.random()*100)
  12. })
  13. promise.then(function(data){
  14. successCallback(data)
  15. })
  16. }

2:本地数据缓存维护:baseStore.js 主要处理页面之间的跳转返回,增加更多的自主性和扩展性

  1. // 自动存储浏览记录
  2. export function saveFrom(prop) {
  3. let name = prop.pagename,transit = prop.location,qhfrom = transit.query.qhfrom,//默认全部返回首页
  4. para = transit.query.para ? JSON.parse(transit.query.para) : '';
  5. if(!qhfrom) return false;
  6. let paths = localStorage.getItem("FromUrlStore") ? JSON.parse(localStorage.getItem("FromUrlStore")) : {};
  7. if (localStorage) {
  8. paths[name] = {
  9. 'name':qhfrom,//存储来源页面
  10. 'para':para //存储来源页面的参数
  11. }
  12. localStorage.setItem("FromUrlStore",JSON.stringify(paths));
  13. }
  14. }
  15. //存储页面的来源,统一管理

3:公共方法的处理:baseFun.js 主要用来定义一些公用的模块方法

  1. //放置公用函数
  2. export function showToast(){
  3. ...
  4. }

使用react-router初始化页面

  1. import React from 'react'
  2. import { render } from 'react-dom'
  3. import { Router,Route,Link,hashHistory,IndexRedirect,IndexRoute} from 'react-router'
  4. import Home from './components/home.jsx'
  5. import Discover from './components/discover.jsx'
  6. const App = React.createClass({
  7. render() {
  8. return (
  9. <div>
  10. <footer>
  11. <Link to="/home">外卖</Link>
  12. <Link to="/discover?qhfrom=home">发现</Link>
  13. </footer>
  14. {this.props.children}
  15. </div>
  16. )
  17. }
  18. })
  19. const route = (
  20. <Router history={hashHistory}>
  21. <Route path="/" component={App}>
  22. <IndexRoute component={Home} />
  23. <Route path="home" component={Home} />
  24. <Route path="discover" component={Discover} />
  25. </Route>
  26. </Router>
  27. )
  28. render(route,document.getElementById("app"))

代码简单介绍:
因为没有后台,采用的 hashHistoryhash路由),关于hash路由可以参考:https://github.com/kliuj/spa-... 有简单的介绍。

  1. 这个是router跳转 <Link to="/home">外卖</Link>
  2. 这个是加载子路由组件 {this.props.children}
  3. 这个是默认的@R_815_404@ <IndexRoute component={Home} />

处理首页的滚动列表

首页主要分成了4个组件
底部导航 + 滚动列表 + 单个产品 + 首页搜索

滚动列表封装了一个简单的组件

  1. <List
  2. list={Pro} //每个产品item组件
  3. pagename={'home'} //跳转产品列表的上级页面 用来处理返回
  4. data={this.state.productList} //需要渲染的数据
  5. onScroll = {this.getMore.bind(this)}//滚动加载函数
  6. />
  7. 在scrollList组件里面监听了滚动事件进行自动加载的处理

react-redux 处理登录和登出

使用redux的原因:用户信息和登录是两个不同的组件,也没有父子级的关系,但是需要进行数据状态共享和相互影响。详细信息可以看上面的官方文档,我这里就简单说一下我这个项目的应用。

定义常量 actionTypes.js

  1. //登入成功
  2. export const LOG_SUCCESS = 'LOG_SUCCESS'
  3. //正在登录
  4. export const LOG_ING = 'LOG_ING'
  5. //注销登录
  6. export const LOG_OUT = 'LOG_OUT'
  7. //主要是统一保存状态对应的名称

定义具体的触发操作 actions/login.js

  1. //注销 同步
  2. export function log_out (){
  3. return {
  4. type:actionTypes.LOG_OUT
  5. }
  6. }
  7. //登入 异步
  8. export function log_in (obj){
  9. return dispatch=>{
  10. //pending 正在进行登录的状态
  11. dispatch({type:actionTypes.LOG_ING})
  12. //开始发送异步请求登录
  13. new Promise((resolve,reject)=>{
  14. ...
  15. }).then(res=>{
  16. dispatch(res)
  17. })
  18. }
  19. }
  20. //异步状态需要使用中间件

处理数据 reducers/login.js

  1. export default function(state = initialData,action){
  2. switch(action.type){
  3. case actionTypes.LOG_SUCCESS:
  4. return {
  5. loginstate:1,username:action.username
  6. }
  7. break
  8. case actionTypes.LOG_ING:
  9. return{
  10. loginstate:-1,username:'正在登录'
  11. }
  12. case actionTypes.LOG_OUT:
  13. return initialData
  14. break
  15. default :
  16. return initialData
  17. }
  18. }

使用中间件创建store层 store/store.js

  1. import {createStore,applyMiddleware} from 'redux'
  2. import thunk from 'redux-thunk'
  3. //合并的多个reducer,解耦
  4. import rootReducer from '../reducers/index.js'
  5. const middlewares = [thunk]
  6. const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore)
  7. export default function configureStore(initialState){
  8. return createStoreWithMiddleware(rootReducer,initialState)
  9. }

路由层引入

  1. import {Provider} from 'react-redux'
  2. const store = configureStore()
  3. const route = (
  4. <Provider store={store}>
  5. <Router history={hashHistory}>
  6. ...
  7. </Router>
  8. </Provider>
  9. )

组件里面使用

  1. import { connect } from 'react-redux'
  2. import {log_out} from '../../actions/login.js' //操作
  3. ...
  4. ...
  5. function mapStateToProps(userinfo){
  6. let {login} = userinfo //这个是返回的所有reducer,我们只用当前需要的,参考 reducers/index.js 内容
  7. return login
  8. }
  9. export default connect(mapStateToProps)(UserInfo)
  10. //这个时候就可以在当前组件状态的 this.props 获取到这个 login 数据,
  11. //操作的时候
  12. const {dispatch} = this.props;
  13. dispatch(log_out())
  14. //这时候就可以操作redux状态的数据,每次数据改变都会下发给所有接收的组件

以上,我们就使用了许多东西完成了一个简单的小项目

猜你在找的React相关文章