码迷,mamicode.com
首页 > 其他好文 > 详细

react-router与react-redux跳转后保存store数据(基于"react-router": "^2.8.0")

时间:2017-06-01 11:18:09      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:tree   click   import   xxx   pac   hub   点击   length   webpack   

1.router引入

import { Route, IndexRoute, Router, hashHistory, browserHistory } from ‘react-router‘;
<Router routes={routes} history={browserHistory}/>

假设store结构如下,分别是主页home,详情页detail,评论页comment

{
    comment: {
        comments:[],
        leng:0
    }
    detail: {
        content: "xxx"
    }
    home: {
        loading: false,
        pos: 0,
        stories: []
    }
}

2.在主页home跳到详情页detail时,在主页实现获取详情页的请求数据,并赋予store,这样store就保留home,

//在home里面跳转是触发fetchDetailData
<Link to={ ‘/detail/‘+item.id}  onClick={this.props.fetchDetailData.bind(this,item.id) }>

获取完详情数据后,这样store数据就成以下结构 

{
    comment: {
        comments:[]
        leng:0
    }
    detail: {
        content:"xxx"
    }
    home: {
        loading:false
        pos:29228
        stories:Array(201)
    }
}

3.在详情页detail跳到评论页comment时,在详情页detail实现获取评论页comment的请求数据,并赋予store,这样store就保留home,detail的数据了

//在详情页detail里面跳转是触发fetchCommentData
<Link to={ ‘/comment/‘+this.articleId}  onClick={this.props.fetchCommentData.bind(this, this.articleId) }>评论</Link>

获取完评论数据后,这样store数据就成以下结构 

{
    comment: {
        comments:Array(20)
        leng:20
    }
    detail: {
        content:"xxx"
    }
    home: {
        loading:false
        pos:29228
        stories:Array(201)
    }
}

4.这样,当要返回是时还原状态就可以从本地缓存的store里面取数据渲染。

//在返回主页home时,在主页做判断,回到最初的最初点击跳转时的位置
componentDidMount () {
    if(this.props.stories.length === 0 ){
        this.props.fetchHomeData(this.s)
    }else{
        console.log(this.props.route.component.displayName)
        if(this.props.route.component.displayName == "Connect(Home)"){
            window.scrollTo(0,this.props.pos);
        }
        this.s()
    }
        
}


github地址:https://github.com/fengnovo/webpack-react/tree/master/simpleFetch

顺便介绍一个好东西,MacDown,麦当劳,一款专门给mac用写markdown的软件工具,开源免费又好用

地址:http://macdown.uranusjr.com/

react-router与react-redux跳转后保存store数据(基于"react-router": "^2.8.0")

标签:tree   click   import   xxx   pac   hub   点击   length   webpack   

原文地址:http://www.cnblogs.com/fengnovo/p/6927871.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!