如何在 reactjs 中持久化或保存状态？ [关闭]答案

【问题标题】：How can I persist or save states in reactjs? [closed]如何在 reactjs 中持久化或保存状态？ [关闭]
【发布时间】：2021-03-10 05:41:38
【问题描述】：

我目前正在使用 ReactJS 开发单页应用程序。我必须使用本地存储来保存状态，但这并不安全。我想知道是否有任何可能的安全方式将本地存储用于状态？

【问题讨论】：

You can add a local state 或尝试Redux Toolkit。
你可以使用 Redux 代替本地存储。
你想坚持什么？请记住，如果它已经处于应用程序状态（即内存），那么将其存储在 localStorage 中基本上只是一样安全。

标签： javascript reactjs ecmascript-6 react-state state-saving

【解决方案1】：

您可以使用 redux-persist 包来保持状态。

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from '../_reducers';
import { composeWithDevTools  } from 'redux-devtools-extension';
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
const persistConfig = {
    key: 'chedsk',
    storage,
  }
const loggerMiddleware = createLogger();

const persistedReducer = persistReducer(persistConfig, rootReducer)
 
const composeEnhancers = composeWithDevTools({trace: true, traceLimit: 20});
export const store = createStore(
    persistedReducer,composeEnhancers( applyMiddleware(
        thunkMiddleware,
        loggerMiddleware
    ))
   
)
export const persistor = persistStore(store)


import { store, persistor } from './_helpers/store';
import { PersistGate } from 'redux-persist/integration/react'
render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>,
    document.querySelector('#root')
);

【讨论】：