Локальное хранилище против избыточного состояния - PullRequest
Новая
       7

Локальное хранилище против избыточного состояния

1 голос
/ 10 апреля 2020

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

Мне было интересно, в чем различия между вызовом API и последующим сохранением данных в состоянии при каждой перезагрузке или сохранением данных один раз в localStorage?

Как настроен код с вызовом API и сохранением с помощью redux.

ПРОВЕРЬТЕ ЖЕТОН 

const token = localStorage.UserIdToken;
if (token) {
  const decodedToken = jwtDecode(token);

  if (decodedToken.exp * 1000 < Date.now()) {
    store.dispatch(logoutUser());
  } else {
    store.dispatch({ type: SET_AUTHENTICATED });
    axios.defaults.headers.common['Authorization'] = token;
    store.dispatch(getUserData());
  }
}

getUserData()

export const getUserData = () => async dispatch => {
  try {
    const res = await axios.get('/user');
    dispatch({
      type: SET_USER,
      payload: res.data,
    });
  } 
  ...
};

1 Ответ

0 голосов
/ 10 апреля 2020

Прежде всего, сохранение данных один раз в localStorage означает, что пользователь не будет получать обновления своих данных, но всегда будет получать то же самое. Подумайте о том, чтобы видеть один и тот же канал социальных сетей каждый раз, когда вы входите в систему, что будет иметь место, если он будет сохраняться в localStorage и не запрашиваться из API при каждой перезагрузке.

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

После вашего комментария я думаю, что есть еще одна причина, которую вы должны рассмотреть: использование localStorage может создать проблемы, если вы хотите изменить пользовательские данные (например, добавьте поле ). Если данные были в 1 месте, вы можете изменить все пользовательские данные и позволить пользователям извлекать новые данные при следующей перезагрузке. Если данные находятся в localStorage, вам нужно будет добавить в приложение код, который изменит существующие данные при первой перезагрузке, а затем ничего не делать в другое время. Это не очень хорошая модель, и у нее больше шансов на наличие ошибок и проблем.

...