(十一)学习笔记–redux-persist持久化数据存储


说明：

  • 一般在react项目中，我们通过redux和react-redux来存储和管理数据，但是使用redux存储数据时，会有一个问题，如果用户刷新了页面，那么通过redux存储的全局数据就会被重置，比如登录状态等。

  • 这个时候有没有解决办法呢？答案肯定是有的：

  • 一般我们可以使用sessionStorage或者localStorage来达到数据存储的要求，但既然我们使用了redux来管理和存储全局数据，如果再使用sessionStorage或者localStorage来读写数据，这样就增大了工作量和代码冗余。

  • 这个时候，redux-persist

  • 满足你的需求，它结合redux，将store中的数据缓存到浏览器的sessionStorage或者localStorage中。

redux-persist 使用如下(当前使用最新版本 redux-persist ^6.0.0)

1.下载

yarn add redux-persist

2.reducer.js配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
/* 存储机制 */
import storage from 'redux-persist/lib/storage';
// import storageSession from 'redux-persist/lib/storage/session';

// import { combineReducers } from 'redux-immutable';
import { reducer as headerReducer } from '@/common/header/store';
import { reducer as menuReducer } from '@/common/menu/store';
import { reducer as loginReducer } from '@/view/login/store';
import { reducer as homeReducer } from '@/view/home/store';
import { reducer as cyquiReducer } from '@/view/cyqui/store';
import { reducer as lcyuiReducer } from '@/view/lcyui/store';

const reducer = combineReducers({
    headerReducer,
    menuReducer,
    loginReducer,
    homeReducer,
    cyquiReducer,
    lcyuiReducer
})

const myReducer = persistReducer({
    key: 'root', // 必须有的
    storage, // 缓存机制
    // whitelist: ['loginReducer'], // reducer 里持久化的数据,除此外均为不持久化数据
    // blacklist: ['name', 'age'] // reducer 里不持久化的数据,除此外均为持久化数据
}, reducer);

export default myReducer;

3.store/index.js配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk'
import reducer from './reducer'
import { persistStore } from 'redux-persist';

const composeEnhancers =
    typeof window === 'object' &&
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
    applyMiddleware(thunk),
);

const store = createStore(reducer, enhancer);

export const persistor = persistStore(store);
export default store

4.在入口文件view/App.js里面将PersistGate标签作为父标签，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { PersistGate } from 'redux-persist/integration/react';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <Router>
                        ....
                    </Router>
                </PersistGate>
            </Provider>
        );
    }
}

export default App;

5.接下来打开浏览器调试工具，查看浏览器的缓存，就可以看到缓存的数据。

此时再刷新页面，你就会发现数据还在

6.使用中遇到的问题:运用这个技术后,发现刷新还是redux会重置数据,原因在如下: