我有点晚了，但是我根据这里的示例实现了一个持久状态。如果你想每X秒更新一次状态，这个方法可以帮助你:

Define a wrapper function let oldTimeStamp = (Date.now()).valueOf() const millisecondsBetween = 5000 // Each X milliseconds function updateLocalStorage(newState) { if(((Date.now()).valueOf() - oldTimeStamp) > millisecondsBetween) { saveStateToLocalStorage(newState) oldTimeStamp = (Date.now()).valueOf() console.log("Updated!") } } Call a wrapper function in your subscriber store.subscribe((state) => { updateLocalStorage(store.getState()) });

在这个例子中，状态最多每5秒更新一次，而不管更新被触发的频率。

在其他回答(以及Jam Creencia的Medium文章)中提供的优秀建议和简短代码摘录的基础上，这里有一个完整的解决方案!

我们需要一个包含2个函数的文件来保存/加载状态到本地存储:

// FILE: src/common/localStorage/localStorage.js // Pass in Redux store's state to save it to the user's browser local storage export const saveState = (state) => { try { const serializedState = JSON.stringify(state); localStorage.setItem('state', serializedState); } catch { // We'll just ignore write errors } }; // Loads the state and returns an object that can be provided as the // preloadedState parameter of store.js's call to configureStore export const loadState = () => { try { const serializedState = localStorage.getItem('state'); if (serializedState === null) { return undefined; } return JSON.parse(serializedState); } catch (error) { return undefined; } };

这些函数是由store.js导入的，我们在这里配置了我们的store:

注意:你需要添加一个依赖:npm install lodash.throttle

// FILE: src/app/redux/store.js import { configureStore, applyMiddleware } from '@reduxjs/toolkit' import throttle from 'lodash.throttle'; import rootReducer from "./rootReducer"; import middleware from './middleware'; import { saveState, loadState } from 'common/localStorage/localStorage'; // By providing a preloaded state (loaded from local storage), we can persist // the state across the user's visits to the web app. // // READ: https://redux.js.org/recipes/configuring-your-store const store = configureStore({ reducer: rootReducer, middleware: middleware, enhancer: applyMiddleware(...middleware), preloadedState: loadState() }) // We'll subscribe to state changes, saving the store's state to the browser's // local storage. We'll throttle this to prevent excessive work. store.subscribe( throttle( () => saveState(store.getState()), 1000) ); export default store;

store被导入到index.js中，所以它可以传递到包装App.js的Provider中:

//文件:src/index.js import React from React 从'react-dom'导入{render} 从'react-redux'导入{Provider} import App from './ App /core/App' Import store from './app/redux/store'; //提供程序使Redux存储可用于任何嵌套组件 呈现( <供应商商店={商店}> < App / > > < /提供者, . getelementbyid(根) ）

注意，绝对导入需要对YourProjectFolder/jsconfig进行更改。Json -如果它一开始找不到文件，它会告诉它去哪里找。否则，您将看到试图从src外部导入某些东西的抱怨。

｛ " compilerOptions ": { “baseUrl”:“src” }， “包括”(" src "): ｝

我无法回答@Gardezi，但基于他的代码的选项可能是:

const rootReducer = combineReducers({
    users: authReducer,
});

const localStorageMiddleware = ({ getState }) => {
    return next => action => {
        const result = next(action);
        if ([ ACTIONS.LOGIN ].includes(result.type)) {
            localStorage.setItem(appConstants.APP_STATE, JSON.stringify(getState()))
        }
        return result;
    };
};

const reHydrateStore = () => {
    const data = localStorage.getItem(appConstants.APP_STATE);
    if (data) {
        return JSON.parse(data);
    }
    return undefined;
};

return createStore(
    rootReducer,
    reHydrateStore(),
    applyMiddleware(
        thunk,
        localStorageMiddleware
    )
);

不同之处在于我们只是保存了一些动作，你可以使用debounce函数来保存你状态的最后一次交互

如果你不需要复制所有redux store到localStorage，你可以使用特定的store参数:

store.subscribe(()=>{
  window.localStorage.setItem('currency', store.getState().lang)
})

并像这样设置初始状态参数值:

const initialState = {
  currency: window.localStorage.getItem('lang') ?? 'en',
}

在这种情况下，你不需要将const persistedState传递给const store = createStore()

一句话:中间件。

查看redux-persist。或者自己写。

[更新2016年12月18日]编辑删除提及两个类似的项目现在不活跃或弃用。

如果任何人对上述解决方案有任何问题，您可以编写自己的解决方案。让我给你看看我做了什么。忽略saga中间件的事情，只关注localStorageMiddleware和reHydrateStore方法。localStorageMiddleware将所有的redux状态拉到本地存储中，rehydrateStore将所有的applicationState拉到本地存储中，如果存在的话，将其放入redux存储中

import {createStore, applyMiddleware} from 'redux'
import createSagaMiddleware from 'redux-saga';
import decoristReducers from '../reducers/decorist_reducer'

import sagas from '../sagas/sagas';

const sagaMiddleware = createSagaMiddleware();

/**
 * Add all the state in local storage
 * @param getState
 * @returns {function(*): function(*=)}
 */
const localStorageMiddleware = ({getState}) => { // <--- FOCUS HERE
    return (next) => (action) => {
        const result = next(action);
        localStorage.setItem('applicationState', JSON.stringify(
            getState()
        ));
        return result;
    };
};


const reHydrateStore = () => { // <-- FOCUS HERE

    if (localStorage.getItem('applicationState') !== null) {
        return JSON.parse(localStorage.getItem('applicationState')) // re-hydrate the store

    }
}


const store = createStore(
    decoristReducers,
    reHydrateStore(),// <-- FOCUS HERE
    applyMiddleware(
        sagaMiddleware,
        localStorageMiddleware,// <-- FOCUS HERE 
    )
)

sagaMiddleware.run(sagas);

export default store;