React-persist的使用（数据持久化）

在React项目中，我们经常会通过redux以及react-redux来存储和管理全局数据。但是通过redux存储全局数据时，会有这么一个问题，如果用户刷新了网页，那么我们通过redux存储的全局数据就会被全部清空，比如登录信息等。

这个时候，我们就会有全局数据持久化存储的需求。首先我们想到的就是localStorage，localStorage是没有时间限制的数据存储，我们可以通过它来实现数据的持久化存储。

但是在我们已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读写数据，这样不仅是工作量巨大，还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢？当然，它就是redux-persist。redux-persist会将redux的store中的数据缓存到浏览器的localStorage中。

一、安装

$ npm install redux-persist --save

二、使用

对于reducer和action的处理不变，只需修改store的生成代码

/*
	该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/
//引入createStore，专门用于创建redux中最为核心的store对象
import { createStore, applyMiddleware ,combineReducers} from 'redux'
//引入redux-persist持久化
import { persistStore, persistReducer } from 'redux-persist'
// import localStorage from 'redux-persist/lib/storage'
import storage from 'redux-persist/lib/storage/index'
//引入为Count组件服务的reducer
import incrementReducer from './incrementReducer';
import personReducer from './personReducer';
//引入中间件 可传入action为函数
import thunk from 'redux-thunk';
// 引入redux-devtools-extension 第三方可视化redux的工具
import {composeWithDevTools} from 'redux-devtools-extension'
// import {composeWithDevTools} from 'redux-devtools-extension'

//实现persist数据持久化
const config = {
  key: 'root',
  storage:storage, //引入的storage是存在local或session
}

//里面保存的是redux完整的key和value 在mapStateToProps调动key
const allReducer = combineReducers({
  incrementReducer,
  personReducer
})

const store = createStore(persistReducer(config,allReducer),composeWithDevTools(applyMiddleware(thunk)))
persistStore(store)
export default store
//正常版暴露store,thunk是保证action可以接收函数
// export default createStore(reducer, applyMiddleware(thunk))