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

Question

我正在创建一个简单的 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)
        } 
    }
    .....

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

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

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