Сохранение состояния Redux с базой данных

14

Из обсуждения здесь кажется, что состояние редукторов Redux должно сохраняться в базе данных.

Как в этом случае работает пользовательская аутентификация?

Не будет ли создан новый объект состояния для замены предыдущего состояния в базе данных для каждого пользователя (и состояния приложения), созданного и отредактированного?

Будет ли использовать все эти данные на передней панели и постоянно обновлять состояние в базе данных?

Изменить: Я создал пример проекта Redux auth, который также является примером универсального Redux и обновление в реальном времени с помощью Redux, Socket.io и RethinkDB.

Теги:
redux
flux
reactjs-flux

2 ответа

24
Лучший ответ

Из обсуждения здесь кажется, что состояние редукторов Redux должно сохраняться в базе данных.

Чтобы сохранить состояние или нет, скорее всего это не проблема Redux. Это больше подходит к логике приложений.

Если что-то происходит в приложении, например, загрузка данных на сервер, очевидно, вам нужно сохранить состояние (или срез состояния на сервер).

Так как сетевые вызовы асинхронны, но Redux синхронно - вам нужно ввести дополнительное промежуточное ПО, redux-thunk или redux-promise.

В качестве регистрационного примера вам, вероятно, понадобятся эти действия,

export function creatingAccount() {
  return { type: 'CREATING_ACCOUNT' };
}

export function accountCreated(account) {
  return { type: 'ACCOUNT_CREATED', payload: account };
}

export function accountCreatingFailed(error) {
  return { type: 'ACCOUNT_CREATING_FAILED', payload: error };
}

export function createAccount(data, redirectParam) {
  return (dispatch) => {
    dispatch(creatingAccount());

    const url = config.apiUrl + '/auth/signup';

    fetch(url).post({ body: data })
      .then(account => {
        dispatch(accountCreated(account));
      })
      .catch(err => {
        dispatch(accountCreatingFailed(err));
      });
  };
}

Некоторая часть состояния, например. пользовательский объект после авторизации может быть сохранен в localStore и повторно увлажнен при следующем запуске приложения.

Поделиться
  • 0
    Это очень помогает - спасибо за отчетливый ответ!
8

Это действительные проблемы. Использование localStorage для сохранения состояния в интерфейсе может быть лучшей стратегией. Вы можете реализовать это с помощью промежуточного программного обеспечения, например:

import {createStore, compose, applyMiddleware} from 'redux';

const localStorageMiddleware = ({getState}) => {
  return (next) => (action) => {
    const result = next(action);
    localStorage.setItem('applicationState', JSON.stringify(
      getState()
    ));
    return result;
  };
};

const store = compose(
  applyMiddleware(
    localStorageMiddleware
  )
)(createStore)(
  reducer,
  JSON.parse(localStorage.getItem('applicationState'))
)

Если вы беспокоитесь о том, что противник обращается к ноутбуку пользователя и крадет учетные данные из него, вы можете сохранить состояние бэкэнд, когда пользователь покинет страницу (Navigator.sendBeacon() может быть здесь полезен) и сохраните его в сеансе.

Поделиться
  • 0
    Спасибо за разъяснения. Имеет ли смысл хранить учетные данные пользователя в базе данных?
  • 0
    Абсолютно! Вы по-прежнему хотите хранить информацию в localStorage , localStorage временно, и вы не должны предполагать, что данные будут localStorage там более 30 дней. localStorage использования для localStorage включают в себя хранение токенов localStorage , текущей страницы, данных, загруженных из бэкэнда (чтобы избежать перезагрузок). Состояние Redux содержит много из них, поэтому имеет смысл сгидрировать его между загрузками страниц. Хранение данных на бэкэнде часто является необходимым, иногда другой подход имеет больше смысла.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню