React/Redux, где установить sessionStorage

Я работаю над своим первым приложением для реагирования/уменьшения, и я не уверен, где я должен вызывать sessionStorage.setItem(). В настоящее время я сохраняю учетные данные пользователя из действия loginUserSuccess(), но я не уверен, что именно здесь я должен это делать. Кроме того, я использую fetch для выполнения запросов и хотел бы добавить authToken пользователя ко всем запросам. Я просматривал fetch-intercept, но не так много документации для изменения заголовков.

actions/loginActions.js

export function loginUser(user) {
  return function(dispatch) {
    return LoginApi.login(user).then(creds => {
      dispatch(loginUserSuccess(creds));
    }).catch(error => {
      throw(error);
    });
  };
}

export function loginUserSuccess(creds) {
  sessionStorage.setItem('credentials', JSON.stringify(creds));
  return {
    type: types.LOGIN_USER_SUCCESS,
    state: creds
  }
}

api/packageApi.js

class PackageApi {
  // called on successful login
  static getAllPackages() {
    const request = new Request('/my/endpoint', {
      method: 'GET',
      headers: new Headers({
        'AUTHORIZATION': `Bearer ${JSON.parse(sessionStorage.credentials).authToken}`
      })
    });
    return fetch(request).then(response => {
      return response.json();
    }).catch(error => {
      return error;
    });
  }
}

export default PackageApi;

reactjs react-redux fetch-api session-storage
person neridaj    schedule 10.01.2018    source источник
comment
Возможный дубликат Где писать в localStorage в приложении Redux?< /а>   -  person Jim G.    schedule 05.07.2018

Ответы (2)


arrow_upward
7
arrow_downward

Принимая во внимание объяснение Дэна Абрамова, мы имеем следующее:

store/sessionStorage.js

export const loadState = () => {
  try {
    const serializedState = sessionStorage.getItem('state');

    if (serializedState === null) {
      return undefined;
    }

    return JSON.parse(serializedState);
  } catch (error) {
    return undefined;
  }
};

export const saveState = (state) => {
  try {
    const serializedState = JSON.stringify(state);
    sessionStorage.setItem('state', serializedState);
  } catch (error) {
    // Ignore write errors.
  }
};

магазин/index.js

import { createStore } from 'redux';
import rootReducer from '../reducers';
import { loadState, saveState } from './sessionStorage';

const persistedState = loadState();
const store = createStore(rootReducer, persistedState);

store.subscribe(() => {
  saveState(store.getState());
});

Полное объяснение: https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage

person Ronald Araújo    schedule 21.10.2019

arrow_upward
2
arrow_downward

Думайте о sessionStorage как об еще одном магазине. Этот магазин необходимо синхронизировать с Redux, чтобы он работал правильно. Я думаю, что редуктор - это правильное место. Здесь у вас есть изменения данных и инициализация данных.

person Krasimir    schedule 10.01.2018