精华内容
下载资源
问答
  • redux持久化

    2021-06-04 13:23:18
    1、安装持久化插件 npm i redux-persist -S 2、配置redux-persist

    redux的数据会随着浏览器刷新、关闭丢失,有些数据,我们希望能够持久化存储,redux-persist插件就能够很好的支持,而且还有白名单功能,可以很灵活的配置redux数据

    参考文档:https://www.npmjs.com/package/redux-persist

    1、安装持久化插件

    npm i redux-persist -S

    2、配置redux-persist

    import { createStore } from 'redux';
    // 持久化插件
    import { persistStore, persistReducer } from 'redux-persist';
    import storage from 'redux-persist/lib/storage';
    // 导入redux数据
    import reducer from './reducer';
    
    // 配置持久化插件(blacklist和whitelist二选一,不要同时配置;都不配置,默认所有数据都持久化)
    const persistConfig = {
      key: 'root',
      storage,
      // blacklist: ['ao'], // 黑名单,例:ao不会被持久化
      whitelist: ['ao'] // 白名单,例:只有ao会被持久化
    }
    
    const persistedReducer = persistReducer(persistConfig, reducer)
    
    // 创建数据存储仓库
    const store = createStore(persistedReducer,
      // 使用谷歌浏览器redux DevTools插件
      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    );
    
    persistStore(store)
    
    export default store;
    

    3、浏览器localStorage会存储redux数据,并且刷新浏览器数据不会丢失

    可查看redux DevTools,检查redux数据变化

    展开全文
  • redux持久化存储方案

    千次阅读 2020-07-23 10:18:54
    我们知道,本地数据库或者像 localstorage 之类的缓存系统才有可能长时间保存数据,而 redux-persist 可以让你的数据从 state 分离出来,保存到浏览器缓存中,以便实现数据的持久化缓存。 既然如此,那么我

    对于Redux来讲,我们都很熟悉了,是著名的 React 全家桶的一份子。但是在使用 Redux 时有个痛点:就是其 store 状态树的state并不是持久保存的,在浏览器端刷新一下数据就全没有了,得重新从后台读取。

    这时候,redux-persist 就显示出它的用武之地了。
    我们知道,本地数据库或者像 localstorage 之类的缓存系统才有可能长时间保存数据,而 redux-persist 可以让你的数据从 state 分离出来,保存到浏览器缓存中,以便实现数据的持久化缓存。
    既然如此,那么我们手动保存到浏览器缓存就行了,不是吗?首先可以肯定的是,手动保存是可以的,也就是一个简单的 setSessionStorage 就能搞定,那么 redux-persist 做了什么呢?它并没有将所有 state 都保存到了缓存,而是保留了 redux 的 store,在 store 里面保存了一个个的 key,这些 key 对应了缓存里面的一个个持久化数据。

    不是所有数据都需要持久化存储,因为很多数据都要保持跟后端的同步更新,那么当你遇到需要持久化保存的数据的时候,就可以使用这个插件来完成你的任务了。

    function App() {
      return (
        <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <div className="App">
         附近的开始啦JFK了
         <HashRouter>
           {renderRoutes(routes)}
         </HashRouter>
        </div>
        </PersistGate>
        </Provider>
      );
      
    }
    import {createStore} from 'redux'
    import {persistStore, persistReducer} from 'redux-persist';
    import storage from 'redux-persist/lib/storage';
    //import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
    import userReducer from './reducersUser.js'
    const persistConfig = {
        key: 'root',
        storage: storage
    }
    console.log(userReducer)
    let myPersistReducer = persistReducer(persistConfig,userReducer.addUserDataAPP)
    let store = createStore(myPersistReducer)
    const persistor=persistStore(store)
    export {
        store,
        persistor
    }
    

     

    展开全文
  • -- redux -- actions title.tsx -- reducers index.tsx title.tsx store.tsx App.tsx index.tsx // react + typescript + echarts + less + axios + antd + redux配置环境 "@types/echarts": "^...
    # 目录结构
    -- redux
    		-- actions
    				title.tsx
    		-- reducers
    				index.tsx
    				title.tsx
    		store.tsx
    App.tsx
    index.tsx
    
    // react + typescript + echarts + less + axios + antd + redux配置环境
    "@types/echarts": "^4.9.6",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-redux": "^7.1.16",
    "@types/react-router": "^5.1.13",
    "@types/react-router-dom": "^5.1.7",
    "antd": "^4.15.0",
    "axios": "^0.21.1",
    "babel-plugin-import": "^1.13.3",
    "customize-cra": "^1.0.0",
    "echarts": "^5.0.2",
    "echarts-for-react": "^3.0.1",
    "less": "^4.1.1",
    "less-loader": "7.3.0",
    "react": "^17.0.1",
    "react-app-rewired": "^2.1.8",						// 按需打包
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.3",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",								 // 中间件, 使dispatch支持传函数参数
    "typescript": "^4.1.2",
    
    • 配置redux相关
    // -- actions title.tsx
    // 该文件下放置所有action函数
    export const onPush = (title: string[], nxtTitle: string) => ({ type: 'PUSH', title, nxtTitle })
    export const onBack = (title: string[]) => ({ type: 'BACK', title })
    
    // -- reducers index.tsx
    // 该文件下汇总reducer的文件
    import title from './title'
    import { combineReducers } from 'redux'
    export default combineReducers({  title })
    
    // -- reducers title.tsx
    // 用于处理主页title
    export default function changeTitle(preState=["主页"], action: any) {
        const { type, title, nxtTitle } = action
        switch (type) {
            case 'PUSH':
                return [...title, nxtTitle]
            case 'BACK':
                return [...title].splice(0, title.length - 1)
            default:
                return preState
        }
    }
    
    // store.tsx
    import reducers from './reducers'
    import { createStore, applyMiddleware } from 'redux'
    import thunk from 'redux-thunk'																		// 用于异步redux
    import { composeWithDevTools } from 'redux-devtools-extension'		// 用于异步redux
    import { persistStore, persistReducer } from 'redux-persist'			// 用于配置持久化redux
    import storageSession from 'redux-persist/lib/storage/session'		// 用于配置持久化redux
    
    const persistConfig = {
        key: 'root',									// 标识
        storage: storageSession,			// 持久化方式
      	// blacklist: ['helloworld']  // 黑名单中数据不持久化, 根据需要配置
        whitelist: ['title']					// 白名单中数据持久化
    }
    export const store = createStore(persistReducer(persistConfig, reducers), composeWithDevTools(applyMiddleware(thunk)))
    export const persistor = persistStore(store)
    
    • 配置主App文件
    // App.tsx
    import { onPush, onBack } from '../src/redux/actions/title'
    import { connect } from 'react-redux'
    // 文件中的state参数
    state = {
        title: this.props.title[this.props.title.length - 1]
    }
    // 增加路由记录
    onPushTitle = (e: any) => {
        switch(e.key) {
            case 'DeviceList':
                this.props.onPush([...this.props.title], '设备列表')
                this.setState({ title: '设备列表' })
                break
            case 'DataDetail':
                this.props.onPush([...this.props.title], '数据分析')
                this.setState({ title: '数据分析' })
                break
            case 'RuleList':
                this.props.onPush([...this.props.title], '规则列表')
                this.setState({ title: '规则列表' })
                break
            default:
                
        }   
    }
    // 路由后退
    onHistoryBack = () => {
        if (this.props.title.length > 1) {
            window.history.back()
            new Promise((resolve) => {
                this.props.onBack([...this.props.title])
                resolve('状态已更新!')
            }).then (() => {
                this.setState({ title: this.props.title[this.props.title.length - 1] })
            })
        }
    }
    // Typescript中最烦的类型定义
    interface ReduxStateToPropsParam {
        title: title,
        onPush: onPush,
        onBack: onBack
    }
    // redux配置
    export default connect(
        (mapStateToProps: ReduxStateToPropsParam) => ({ title: mapStateToProps.title }),
        {
            onPush,
            onBack
        }
    )(AppUI)
    
    • 配置入口文件
    // index.tsx
    import ReactDOM from 'react-dom'
    import { BrowserRouter } from 'react-router-dom'
    import { store, persistor } from './redux/store'
    import { PersistGate } from 'redux-persist/integration/react'
    import { Provider } from 'react-redux'
    import App from './App'
    
    ReactDOM.render(
      <BrowserRouter>
        <Provider store={store}>
          <PersistGate persistor={persistor}>        
              <App />      
          </PersistGate>
        </Provider>
      </BrowserRouter>,
      document.getElementById('root')
    )
    
    展开全文
  • Next Redux包装器和Redux Persist(以及Redux-thunk)一起使用-为具有持久全局状态的NEXT JS项目准备的样板 :sparkles: 我的Next.js网站只需要一个简单的持久全局状态。 这是一个redux样板,我起初是为自己编写的,...
  • redux_persist:持久化Redux状态
  • Redux工作流程方案 npm i redux-persist 前往 转到API密钥=>可发布密钥 阅读文档 安装react-stripe-checkout npm i react-stripe-checkout 创建单独的组件 import React from "react"; import StripeCheckout from ...
  • 主要介绍了React通过redux-persist持久化数据存储的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 轻松保存和加载状态。 产品特点 灵活的存储引擎 :基于window.indexedDb :基于window.localStorage 或对于没有Promise支持的环境 :基于react-native/AsyncStorage... : { type: 'REDUX_STORAGE_LOAD', payload: /
  • redux数据持久化

    2018-12-04 22:22:40
    https://www.jianshu.com/p/a7a10ac59511
    展开全文
  • Redux实现数据持久化两步骤快速完成

    千次阅读 2019-10-14 20:51:57
    vuex有数据持久化插件,redux有没有呢?答案是肯定的。那就是简单易用的redux-persist,官网链接 两步走起! 一,配置我们的创建store的文件 store/index.js import { createStore, applyMiddleware, compose } from...
  • 笔记:2020.7.21 React配置redux及其持久化 redux所需安装插件 npm i redux react-redux redux-thunk --save npm i @types/react-redux 持久化所需安装插件 安装方式两种:npm install --save redux-persist / ...
  • 使用redux页面刷新数据丢失问题? 别看其他的了,直接上干活,直接抄代码,懂?
  • 在开发react-native过程中,使用redux保存状态迁移已基本成为一个标准做法。用户登录时的状态变更,会带来redux状态迁移,而应用程序的其他部分也需要了解用户是否已登录以及相关的登录信息,只要软件不退出,通过...
  • 今天无意间看到redux的数据持久化,在想为什么需要这个,多方查找资料后从:https://medium.com/react-native-development/react-native-app-stack-march-2017-f7605e02d46f#.nlmn7dh5u,得到了答案。 ...
  • React整合redux并开启持久化 一、添加相关依赖 yarn add redux # 增加redux yarn add react-redux yarn add @babel/plugin-proposal-decorators # 开启注解的支持 yarn add babel-plugin-transform-decorators-...
  • 一般在react项目中,我们通过redux和react-redux来存储和管理数据,但是使用redux存储数据时,会有一个问题,如果用户刷新了页面,那么通过redux存储的全局数据就会被重置,比如登录状态等。 这个时候有没有...
  • redux-persist插件 .../引入持久化储存插件 import {persistStore, persistReducer} from 'redux-persist'; // 本地储存 // import storage from 'redux-persist/lib/storage'; // 会话储存 impor
  • import { createStore } from 'redux' import { persistStore, persistReducer } from 'redux-persist' import storage from 'redux-persist/lib/storage' // defaults to localStorage for web import ro
  • 针对实际应用中需要对于应用的部分数据持久化的需求,这里写个例子简单说一下Redux怎么处理,一共就两步很简单 首先自己创建处理存取localStorage的方法,这里对于异常做一些处理 使用loadState方法...
  • 数据持久化: store.js: import{createStore,combineReducers,applyMiddleware}from'redux'; importthunkfrom'redux-thunk'; import{reducerasfirstReducer}from'../views/First/_index.js'; import{...
  • react-redux 数据持久化

    2019-11-29 15:23:34
    import {createStore, compose, applyMiddleware } from 'redux'; import reducer from './reducer'; import thunk from 'redux-thunk'; // persist store import {persistStore, persistReducer} from 'redux-p...
  • 主要介绍了在React-Native中持久化redux数据,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vuex实现数据状态持久化,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Redux实现数据持久化

    2019-10-22 09:33:39
    在开发的过程中,数据用redux管理,觉得希望将数据持久化保存,也就是说当用户下一次打开APP或者网站的时候,我们希望浏览器或者APP自动加载上次的数据,怎么办?有没有一个统一的方式? 有的,这就是简单易用的...
  • react中redux利用redux-persist数据持久化

    千次阅读 2018-12-04 13:19:51
    前端数据需要存在本地,来避免多次请求,提高前端效率。可以选的有cookie,localstorage,local...在每次请求到数据后都去调用一次localstorage.set()感觉也挺麻烦的,最好的就是redux里有了数据就直接自动放入local...
  • redux数据持久化问题

    2019-08-13 19:12:35
    redux的数据在页面刷新的时候会变成初始状态 将redux的数据存到本地存储可以实现避免这种情况 在reducers修改redux的时候将数据存储起来 /** * reducer参数 * 1. 初始state * 2. actions */ import * ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,123
精华内容 849
关键字:

redux持久化