先介绍一下问题出现的业务、环境和场景，这是一个购买票的业务流程，使用Taro构建的h5页面，引入redux进行状态管理，在小程序中不存在刷新页面的操作，所以也就没有遇到redux集中管理的状态丢失问题。
但在h5端环境是浏览器，刷新页面都是常态，这就遇到刷新页面导致数据丢失的问题，于是使用了redux-persist进行数据可持续化处理。通过库介绍使用起来还是很简单的，但就是这么简单的引入调用，在我的代码里却出问题了。
大概的表象是：查看loca stroage是有数据的，但刷新页面persist:root存储的数据又到了初始化状态，就这样redux-persist在我这里失效了。下面开始了找bug的故事
首先想到应该是我使用的方式不对，仔细看了一遍库的代码示例确定姿势是对的。
从表象来看，应该是哪里重置了状态，想到自己代码中也有重置状态的操作，尝试把所有重置的地方都注释掉，发现问题还在，那就有点闷逼了，到底是哪里重置掉！
又去redux-persist的issues里翻了翻，上网搜了搜发现都没有类型的经历。看来真的是我个人问题。采取缩减bug排查法，目前就页面相关的运行了app.jsx、pages/index/index、pages/detail/index，开始注释慢慢排查。
很遗憾没有找到任何线索，既然页面没有问题，那问题可能就在redux使用中。reducers是状态更新的地方，问题应该出在这里。
看了一遍action.type也没有什么问题，那就都注释掉，保留测试那个type，运行了一下发现正常了，缩减排除法还是比较有效的。
为了找到元凶，其他type一个一个开放出来，后来发现是问题出来没有处理的type中
switch (type) {
case SAVE:
return {
...state,
test: action.data
}
default:
return { // 就是这里
...state
}
}
发现有三个为处理的type进入到这个分支里面，该死的我使用解构返回了一个新的对象，直接重置了为初始状态，一场血的教训就这样结束了。最后把它改为如下形式解决:
switch (type) {
case SAVE:
return {
...state,
test: action.data
}
default:
return state;
}
网友评论