redux-persist does't work, rehydrate only occur once

Question

I am currently working with react 15.4.2 and redux, i am going to keep my react/redux state whenever the browser refresh. and i found people are suggesting redux-persist but when i follow the instruction of basic usage, it doesn't work at all, all state returning to empty again when i refresh my browser. this is what shown by logger

rehydrate only show once (at the first time ), and never happen again while doing another action. and here is my store.js

import {createStore, applyMiddleware} from "redux";
import thunk from "redux-thunk";
import logger from "redux-logger";
import promise from "redux-promise-middleware";
import {composeWithDevTools} from "redux-devtools-extension";
import {autoRehydrate, persistStore} from 'redux-persist';

import combineReducer from "./reducers/combineReducer";

const middleware = composeWithDevTools(applyMiddleware(promise(), thunk, logger()), autoRehydrate());

const store = createStore(combineReducer, middleware);
persistStore(store);

export default store;

and here is my index.js :

import React from "react";
import ReacrDOM from "react-dom";
import {Router, Route, IndexRoute, hashHistory, browserHistory} from "react-router"
import {Provider} from "react-redux";
import {login_check} from "./actions/logActions";

import store from "./store";
import Layout from "./pages/Layout";
import Dashboard from "./pages/Dashboard";
import Login from "./pages/login/index";
import User from "./pages/user/index";
import Pemain from "./pages/pemain/index";

const app = document.getElementById("app");

function requireLogin() {
    const {user_id, session_key}=store.getState().logReducer;
    store.dispatch(login_check({user_id: user_id, session_key: session_key}))
    const {logged_in}=store.getState().logReducer;
    if (!logged_in) {
        /*browserHistory.push('#/login');*/
        hashHistory.push('/login');
    }
}

ReacrDOM.render(
    <Provider store={store}>
        <Router history={hashHistory}>
            <Route path="/login" component={Login}/>
            <Route path="/" component={Layout} onEnter={requireLogin}>
                <IndexRoute component={Dashboard} onEnter={requireLogin}/>
                <Route path="user" component={User} onEnter={requireLogin}/>
                <Route path="pemain" component={Pemain} onEnter={requireLogin}/>
            </Route>
        </Router>
    </Provider>
    , app);

and here is package.json :

{
  "name": "learn-react",
  "version": "1.0.0",
  "description": "for learning purpose only",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --content-base --inline --hot --port 3300"
  },
  "keywords": [
    "react",
    "learning"
  ],
  "author": "vidy hermes",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0",
    "redux-devtools-extension": "^2.13.0",
    "redux-logger": "^2.8.1"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.22.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "base-64": "^0.1.0",
    "css-loader": "^0.26.2",
    "file-loader": "^0.10.1",
    "globalize": "^0.1.1",
    "history": "^4.5.1",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "moment": "^2.17.1",
    "path": "^0.12.7",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "react-redux": "^5.0.2",
    "react-redux-loading-bar": "^2.8.2",
    "react-router": "^3.0.2",
    "react-widgets": "^3.4.6",
    "redux": "^3.6.0",
    "redux-persist": "^4.8.0",
    "redux-promise-middleware": "^4.2.0",
    "redux-thunk": "^2.2.0",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8"
  }
}

i have google it for two days, and still haven't found any solution, how to make react-persist work? please kindly help me..

regards,

vidy hermes

Answer 1

I believe you need to pass autorehydrate to createStore not composeWithDevTools

import { autoRehydrate } from 'redux-persist';
import { createStore } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger'

const middleware = composeWithDevTools(applyMiddleware(promise(), thunk, logger()));

const store = createStore(combineReducer, middleware, autoRehydrate());

Answer 2

i am just a novice in react/redux . though i didnt import the promise and thunk , i just used the normal syntax i guess you are using the " () " after logger that makes it a function call and it doesnt save the state and autoRehydrate in the store.

using composeWithDevTools:

const middleware = composeWithDevTools(applyMiddleware(logger));

 let store = createStore(rootReducer   , middleware , autoRehydrate());
 persistStore(store ) ;

using simple boilerplate :

let store = createStore(rootReducer   , applyMiddleware(logger) , autoRehydrate());
 persistStore(store ) ;

I hope it helps .