首页 文章

如何在react / redux Web应用程序中保存数据？

提问于
浏览 次
3

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

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

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

javascript reactjs redux

3 回答

  • 2

    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

    回复于
  • 1

    您应该在Redux商店中存储和持久保存用户名，每次启动应用程序时，您都可以从App的任何位置访问用户名 .

    坚持还原状态我建议你redux-persist .

    回复于
  • 1

    有两种方法可以保留数据： Cookies 和 LocalStorage

    但是这里有区别和它们的用例：

    • 我们将数据存储在用于服务器端读取的cookie中，而对于客户端，我们使用localStorage .

    • 如果您使用cookie，因为它会在网络呼叫中消耗一些额外的带宽 .

    • LocalStorage没有到期，您可以在应用程序中控制它何时到期 .

    • LocalStorage在 Chrome 中每个来源大到10MB，但在某些浏览器中至少5MB，而cookie可以存储多达4096bytes .

    这完全取决于您的用例 . 我建议您使用localStorage;在客户端使用它 .

    PS 我赢了't recommend to use any persisting library. It will increase your app size. When it comes to code splitting and caching, then it becomes quite cumbersome to alleviate from these extra KBs. It happens when your app size grows. Remember don' t去寻找额外的套餐，除非你自己不能轻易达到目标 .

    回复于

相关问题