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.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::') 
     } 
    )