React通过redux缓存列表数据以及滑动位置，回退时恢复页面状态

在使用React和React-router实现单页面应用时，会有这样一个场景：从列表页面点击某项条目进入详情页，然后回退至列表页面时，列表页面会重新刷新，不仅数据重新获取了，滚动条也回到了顶部。用户要继续查看剩余数据的话，需要重新滑动到之前点击的那个条目，如果列表做了分页的话就更麻烦了，这对于用户体验来说是非常不好的。

所以我们希望能做到，从二级页面回退至列表页面时，列表页面能保留之前的状态（数据和滚动条位置）。

那么怎么实现呢？下面分享一下React通过redux来缓存列表数据以及滑动位置，以达到保留列表页面状态的方法。

关于redux以及react-redux的使用，这里就不做讲解了，可以参考我之前写的 React-redux的原理以及使用 。当然网络上有很多讲解得更清晰的文章，读者可以自行搜索。

下面直接进入正题，介绍实现需求的步骤吧

1、安装redux以及react-redux

cnpm install redux react-redux -dev --save

2、编写操作列表页面相关数据的action

/**
 * Created by RaoMeng on 2018/12/10
 * Desc: 列表数据缓存
 */

import {CLEAR_LIST_STATE, LIST_STATE} from "../constant