redux-persist : 브라우저의 로컬 저장소에 상태를 저장하는 방법은 무엇입니까?

Question

나는 redux를 배우고 있으며 어떻게 상태를 로컬로 저장할 수 있는지 알고 싶었습니다. 그래서 상태를 약간 변경 한 후 새로 고침하면 상태가 남아 있습니다. 나는 redux-persist에 대해 알게되었고 github 의사가 그것을 사용하는 방법을 설명했지만 나에게는 그다지 명확하지 않았습니다.

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

import App from './components/app'; 
import reducers from './reducers'; 

const createStoreWithMiddleware = applyMiddleware()(createStore); 

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <App /> 
    </Provider> 
    , document.querySelector('#container')); 

어떻게 그것을 달성 할 수있다 - 여기

내 응용 프로그램의하는 index.js 코드?

import React from 'react'; 

import { Provider } from 'react-redux'; 
import { browserHistory } from 'react-router'; 
import { syncHistoryWithStore } from 'react-router-redux'; 

import createRoutes from './routes'; // Contains the routes 
import { initStore, persistReduxStore } from './store'; 
import { appExample } from './container/reducers'; 

const store = initStore(appExample); 

export default class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { rehydrated: false }; 
    } 

    componentWillMount() { 
    persistReduxStore(store)(() => this.setState({ rehydrated: true })); 
    } 

    render() { 
    const history = syncHistoryWithStore(browserHistory, store); 
    return (
     <Provider store={store}> 
     {createRoutes(history)} 
     </Provider> 
    ); 
    } 
} 

Answer 1

는 redux-persist store.js에 사용하여 상점을 만들기 위해해야 ​​할 일이다 샘플이 명확하지 않습니다. 로그인 태그가 필요한 이유는 무엇입니까? 제 경우에는 응용 프로그램을 렌더링하는 별도의 파일이 있습니다. App을 렌더링 할 실제 app.js가 아닙니다.

Answer 2

//In your createStore have this code  
import { applyMiddleware, compose, createStore } from 'redux' 
import thunkMiddleware from 'redux-thunk'; 
import { createLogger } from 'redux-logger'; 
import rootReducer from '../reducers'; 
import { persistReducer } from 'redux-persist' 
import localForage from 'localforage'; 
const loggerMiddleware = createLogger(); 

export default (initialState = {}) => { 
    // ====================================================== 
    // Middleware Configuration 
    // ====================================================== 
    const middleware = [thunkMiddleware, loggerMiddleware] 

    // ====================================================== 
    // Store Enhancers 
    // ====================================================== 



    const enhancers = [] 
    const __DEV__ = process.env.NODE_ENV !== 'production'; 
    if (__DEV__) { 
    const devToolsExtension = window.devToolsExtension 
    if (typeof devToolsExtension === 'function') { 
     enhancers.push(devToolsExtension()) 
    } 
    } 

    // ====================================================== 
    // Store Instantiation and HMR Setup 
    // ====================================================== 
    let config = { 
    key: 'root', 
    storage: localForage, 
    whitelist: ['user'], 
    debug: __DEV__ 
    } 
    let configureReducer = persistReducer(config, rootReducer) 
    const store = createStore(
    configureReducer, 
    initialState, 
    compose(
     applyMiddleware(...middleware), 
     ...enhancers 
    ), 
) 

    return store 
} 


// In your App.js or root app, do this in your componentDidMount 

persistStore(
     store, 
     undefined, 
    () => { 
     console.log('callback::') 
     } 
    )