react如何在刷新页面时,Redux里面的值丢失问题

简介: react如何在刷新页面时,Redux里面的值丢失问题

在使用redux中发现,当我们刷新页面之后,store中的状态会消失。但是在某些时候可能不仅需要用到sotre来管理各种状态,还需要store里的数据能一直保存,就像缓存一样。redux-persist可以让你的数据从state分离出来,保存到浏览器缓存中,以便实现数据的持久化存储


一、下载依赖


npm install redux-persist--save


二、然后修改store的入口文件


import {createStore, applyMiddleware} from 'redux'
import mainReducers from "./reduces";
import thunk from "redux-thunk";
引入我们需要的方法
import {persistStore, persistReducer} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
const persistConfig = {
    key: 'root',
    storage: storage,
}
persistConfig 对象还可以设置黑名单白名单,就是不需要永久保存的数据。
const myPersistReducer = persistReducer(persistConfig, mainReducers)
const store = createStore(myPersistReducer, applyMiddleware(thunk))
export const persistor = persistStore(store)
export default store


三、最后在react的入口文件中设置如下


// import api from './api'
import React, { Component } from 'react'
import {
  BrowserRouter,
  Route,
  Redirect
} from 'react-router-dom'
import { Provider } from "react-redux";
//引入PersistGate标签,和persistor
import { PersistGate } from "redux-persist/lib/integration/react";
import store from "./store/index";
import { persistor } from "./store";
import routes from './Router'
import requireLogin from './requireLogin'
import Login from './pages/admin/login'
class App extends Component {
  render() {
    return (
       <Provider store={store}>
        <BrowserRouter>
          <PersistGate loading={null} persistor={persistor}>
            <div>
            <Route exact path="/" render={() => <Redirect to="/web/index" push />} />
            <Route path='/login' component={Login} />
            {routes.map((route, i) => (
              <Route
              key={i}
              path={route.path}
              component={
                route.path.includes('/admin')
                ? requireLogin(route.component)
                : route.component
              }
            />
            ))}
            </div>
          </PersistGate>
        </BrowserRouter>
      </Provider>
    );
  }
}
export default App;


相关文章
|
28天前
|
存储 JavaScript 前端开发
掌握现代Web开发的基石:深入理解React与Redux
【10月更文挑战第14天】掌握现代Web开发的基石:深入理解React与Redux
31 0
|
27天前
|
存储 JavaScript 前端开发
React中使用redux
【10月更文挑战第15天】
30 3
|
1月前
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
|
1月前
|
JavaScript 前端开发
使用 React 和 Redux 构建动态图表应用
【10月更文挑战第3天】使用 React 和 Redux 构建动态图表应用
|
1月前
|
JavaScript 前端开发
使用 React 和 Redux 构建一个计数器应用
【10月更文挑战第3天】使用 React 和 Redux 构建一个计数器应用
|
1月前
|
存储 JavaScript 前端开发
|
1月前
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
32 1
|
3月前
|
存储 JavaScript 前端开发
React中使用redux
React中使用redux
135 56
|
1月前
|
前端开发 JavaScript
深入理解前端状态管理:React、Redux 和 MobX
【10月更文挑战第7天】深入理解前端状态管理:React、Redux 和 MobX
35 0
|
3月前
|
存储 JavaScript 前端开发
react redux 实现原理
【8月更文挑战第29天】react redux 实现原理
25 4