Question

我正在创建一个简单的react / redux Web应用程序，您可以在其中简单地输入用户名，然后使用该数据登录到仪表板视图。无需登录机制，也不需要会话cookie或jwt令牌，只需一个基本应用程序即可了解单页应用程序如何通过react / redux进行操作。

流程是这样的（使用React Router）

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)
        } 
    }
    .....

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

从保留用户名和获取用户数据的角度来看，这是更好的方法吗？这样做是错误的方法吗？

Answer 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

Answer 2

您应该在Redux存储中存储并保留用户名，每次启动应用程序时，您都可以从应用程序的任何位置访问用户名。

要保持redux状态，我建议您redux-persist。

Answer 3

有两种保留数据的方法： Cookie 和 LocalStorage

但是这里有区别和用例：

我们将数据存储在cookie中以供服务器端读取，而对于客户端，我们使用localStorage。
如果您要在客户端读取数据，请不要使用cookie，因为它会占用网络呼叫中的一些额外带宽。
LocalStorage没有到期，您可以随时控制自己的应用程序。
在 Chrome 中，LocalStorage每个原始存储区的大小最大为10MB，但在某些浏览器中至少为5MB，而cookie最多可以存储4096字节。

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

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

如何在React / Redux Web应用程序中持久存储数据？

3 个答案: