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();