如何在 react/redux web 应用程序中持久化数据？答案

【问题标题】：How to persisting data in a react/redux web app?如何在 react/redux web 应用程序中持久化数据？
【发布时间】：2019-02-03 12:40:32
【问题描述】：

我正在创建一个简单的 react/redux web 应用程序，您可以在其中简单地输入用户名，然后它就会让您使用该数据登录到仪表板视图。没有登录机制，也不需要会话 cookie 或 jwt 令牌，只是一个了解单页应用程序如何使用 react/redux 流动的基本应用程序。

流程是这样的（使用反应路由器）

login page (/login) -> 
enter username -> 
handle submit ->
fetch data -> 
populate redux store -> 
redirect to dashboard component (/dashboard) ->
render data 

class Login extends React.Component {
    handleSubmit = event => {
        this.props.getData(this.state.username)
    }

    render() {
        .....
        if (data !== '' && data.username !== '') {
            return <Redirect to='/account'/>;
        }

        .....
    }
}

class Account extends React.Component {
    componentDidMount() {
        if (!sessionStorage.username) {
            sessionStorage.username = this.props.data.username;
        } else {
            this.props.getAddressInformation(sessionStorage.username)
        } 
    }
    .....

我不确定如何最好地解决有人出于任何原因重新加载仪表板页面并且状态消失的问题。现在我只是使用会话存储来保存用户名并在呈现帐户组件/页面时，它会检查它并将数据取回存储。

在持久化用户名和获取用户数据方面，这是一种更好的方法吗？这是错误的开始方式吗？

【问题讨论】：

你为什么不用localStorage？
我也用过。
那有什么问题？
我只是想确定没有一种更有效的方式来实现我想要实现的目标，或者没有更好的方式来持久化用户名。

标签： javascript reactjs redux

【解决方案1】：

https://github.com/rt2zz/redux-persist

redux-persist 将为您处理所有这些。

来自自述文件：

// configureStore.js

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native

import rootReducer from './reducers'

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}

还有 App.js

import { PersistGate } from 'redux-persist/integration/react'

// ... normal setup, create store and persistor, import components etc.

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <RootComponent />
      </PersistGate>
    </Provider>
  );
};

如果你需要在加载状态之前做一些特别的事情，那么你可以在 PersistGate 上使用 onBeforeLift

【讨论】：

【解决方案2】：

有两种方法可以持久化数据： Cookies 和 LocalStorage

但这里有区别及其用例：

我们将数据存储在 cookie 中以供服务器端读取，而对于客户端，我们使用 localStorage。
如果您在客户端读取数据，请不要使用 cookie，因为它会在网络调用中消耗一些额外的带宽。
LocalStorage 没有过期时间，您可以随时在应用中控制它是否过期。
在 Chrome 中，LocalStorage 每个源有 10MB 大，但在某些浏览器中至少有 5MB，而 cookie 最多可以存储 4096 字节。

这完全取决于您的用例。我建议像您一样使用 localStorage；在您的客户端使用它。

PS我不建议使用任何持久化库。它会增加您的应用程序大小。当涉及到代码拆分和缓存时，减轻这些额外的 KB 变得非常麻烦。当您的应用程序大小增加时会发生这种情况。请记住，除非您自己无法轻松实现目标，否则不要购买额外的套餐。

【讨论】：

【解决方案3】：

您应该在 Redux 存储中存储和持久化用户名，并且每次启动应用程序时，您都可以从应用程序的任何地方访问用户名。

为了保持 redux 状态，我推荐你redux-persist。

【讨论】：