Как сохранить данные в веб-приложении реагировать / сокращать?

Question

Я создаю простое веб-приложение реагирования / редукции, в котором вы можете просто ввести имя пользователя, и оно будет как бы регистрировать вас в виде панели инструментов с этими данными. нет механизмов входа в систему или необходимости использовать сеансовые куки или токены jwt, просто базовое приложение, чтобы узнать, как одностраничные приложения протекают с реагированием / избыточностью.

поток идет так (с реагирующим маршрутизатором)

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

Существует два способа сохранения данных: Cookies и LocalStorage

Но здесь идет различие и варианты их использования:

• Мы храним данные в файлах cookie для чтения на стороне сервера, а на стороне клиента используем localStorage.
• Если вы читаете данные на стороне клиента, не используйте куки, поскольку они потребляют дополнительную пропускную способность при сетевых вызовах.
• LocalStorage не имеет срока действия, и вы контролируете в своем приложении всякий раз, когда вы хотите, чтобы срок его действия истек.
• LocalStorage размером до 10 МБ на источник в Chrome , но не менее 5 МБ в некоторых браузерах, в то время как файлы cookie могут хранить до 4096 байт.

Все зависит от вашего варианта использования. Я бы порекомендовал использовать localStorage, так как вы используете его на стороне клиента.

PS Я не буду рекомендовать использовать любую сохраняющуюся библиотеку. Это увеличит размер вашего приложения. Когда дело доходит до разделения кода и кеширования, становится все труднее избавиться от этих лишних КБ. Это происходит, когда размер вашего приложения растет. Помните, не покупайте дополнительные пакеты, если вы сами не можете легко достичь цели.

Answer 2

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

redux-persist справится со всем этим за вас.

Из файла readme:

// 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 }
}

и приложение. 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>
  );
};

Если вам нужно сделать что-то особенное перед загрузкой состояния, вы можете использовать onBeforeLift на PersistGate

Answer 3

Вы должны хранить и сохранять имя пользователя в магазине Redux, и каждый раз при запуске приложения вы можете получить доступ к имени пользователя из любого места приложения.

для сохранения избыточного состояния Я рекомендую вам redux-persist .