zoukankan      html  css  js  c++  java
  • react redux数据持久化

    首先安装:npm i  redux-persist -S

    安装以后直接进入src/index.js 写入以下代码   直接拿来用

    import React,{Component} from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from "react-redux"
    import { createStore,applyMiddleware } from "redux"
    import thunk from "redux-thunk"

    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';

    import rootReducer from "./reducers"
     
    import {persistStore,persistReducer} from "redux-persist"
    import {PersistGate} from "redux-persist/es/integration/react"
    import storage from 'redux-persist/es/storage'
    const config = {
        key:'root',
        storage,
    }

    function configureStore(){
        let reducer = persistReducer(config,rootReducer);
        let store = createStore(reducer,applyMiddleware(thunk));
        let persistor = persistStore(store)
        
        return {persistor,store}
    }

    export default class Hello extends Component{
        render(){
            
            const {persistor,store} = configureStore();
            console.log(111)
            return(
                <Provider store={store}>
                    <PersistGate persistor={persistor}>
                        <div>
                            <App />
                        </div>
                    </PersistGate>
                    
                </Provider>
            )
        }
    }
     
    ReactDOM.render(<Hello />, document.getElementById('root'));

    serviceWorker.unregister();

      

  • 相关阅读:
    线程
    VS调试Tip集结
    努力提高代码的质量
    深入Razor,你准备好了吗?(兼谈我的学习方法和定位)
    使用匿名委托,Lambda简化多线程代码
    敏捷个人-自我成长[关注个人成长软技能]
    使用ActiveRecord的三层构架及泛型例子
    RUP4+1架构方法
    信息系统字段动态定义 和 JavaScript 实用脚本,很好,珍藏起来[转贴]
    CRM2011
  • 原文地址:https://www.cnblogs.com/zqxi/p/12462166.html
Copyright © 2011-2022 走看看