Предварительно загруженное состояние Redux перезаписывает состояние моего приложения

Question

Для создания сеанса я храню JWToken в localStorage (не самое безопасное место - я знаю).Чтобы позволить пользователю обновить окно браузера, я сохраняю пользовательское состояние в избыточном виде:

const getPersistedState = () => {
    try {
      const persistedToken = JSON.parse(localStorage.getItem('token'));
      const persistedTimeStamp = JSON.parse(localStorage.getItem('authTimeStamp'));
      if (persistedToken === null ||
          persistedTimeStamp === null) {
        return undefined
      }
      const persistedState = { user: { auth: {
            token: persistedToken,
            authTimeStamp: persistedTimeStamp,
            authed: true,
          }
        }
      }
      return persistedState
    } catch(e) {
      return {}
    }
}

const persistedState = getPersistedState()
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
    rootReducer,
    persistedState,
    composeEnhancers(applyMiddleware(thunk))
)

Моя проблема заключается в том, что все пользовательское состояние перезаписывается этим, если хранилище обновляется.Поэтому я не могу определить объект INITIAL_STATE на моем пользовательском редукторе, потому что он будет мгновенно перезаписан.

Есть ли способ достичь постоянного состояния, которое может слиться с существующим состоянием, которое будетдай мне возможность определить INITIAL_STATE?

Answer 1

Не означает, что вы добавляете префикс постоянный, что означает, что редуктор - лучшее место для его обработки.

localStorage Взаимодействие - это скорее компонент.

Поэтому попробуйте отправитьдействие SET_TOKEN в компоненте после успешного получения всех атрибутов токена через localStorage.

// Component.js
const getPersistedState = () => {
  try {
    // TODO: get all attributes in local storage
    this.props.setToken(...attributes); // dispatches SET_TOKEN action
  } catch(e) {
    // error
  }
}

componentDidMount() {
  this.getPersistedState(); // retrieve token attributes
}

// Reducer.js
const INITIAL_STATE = {
  user: {
    auth: {
      token: '',
      authTimeStamp: -1,
      authed: false,
    }
  }
};

// User Reducer handles SET_TOKEN action
const user = (state = INITIAL_STATE, action) {
  switch(action.type) {
    case Action.SET_TOKEN:
      const { token, authTimeStamp, authed } = action.payload;
      return {
        ...state,
        auth: {
          token,
          authTimeStamp,
          auth,
        }
      };
    default:
      return state;
  }
}