redux-persist不起作用，仅在

Question

我目前正在使用react 15.4.2和redux，我将在浏览器刷新时保持react / redux状态。并且我发现人们建议使用redux-persist，但是当我按照基本用法的指示时，它根本不起作用，当我刷新浏览器时，所有状态都会再次变为空。这是记录器显示的内容

再水化只显示一次（第一次），并且在做另一个动作时再也不会发生。这是我的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;

这是我的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);

这是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"
  }
}

我已经谷歌两天了，仍然没有找到任何解决方案，如何让反应持续工作？请帮助我..

的问候，

vidy hermes

Answer 1

我相信你需要将autorehydrate传递给createStore而不是composeWithDevTools

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

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

Answer 2

我只是react / redux的新手。虽然我没有导入承诺和thunk，我只是使用正常的语法，我猜你正在使用＆＃34; （）＆＃34;在logger之后，它使它成为一个函数调用，并且它不会在商店中保存状态和autoRehydrate。

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

我希望它有所帮助。