Начальное состояние Redux с сервера - PullRequest
Новая
       18

Начальное состояние Redux с сервера

2 голосов
/ 15 мая 2019

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

  1. В ComponentWillMount() получите информацию с сервера. Con: больше не без гражданства.

  2. В корневом объекте, обернутом Provider, получите там состояние. Против: свалка для государства; может никогда не понадобиться, если пользователь не имеет доступа к определенной странице.

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

** РЕДАКТИРОВАТЬ **

Как отметил коллега, использование ComponentWillMount() не означает, что оно больше не является лицом без гражданства. Я просто отправил бы свое действие, и состояние было бы в Redux, а не в самом компоненте. Так что # 1 звучит как путь.

Ответы [ 2 ]

1 голос
/ 15 мая 2019

Техника, которую я использовал в SPA, состоит в том, чтобы встраивать начальное состояние с сервера в страницу, например, 

<script>
    window.myAppState = { ... }
</script>

Состояние, подобное настроенному, устанавливается для различных инструментов отслеживания, например, GA, Intercom и т. Д. Вы можетезатем используйте это, чтобы установить начальное состояние в вашем редукторе 

 const initialState = new AppState(window.myAppState);
 const reducer = (state = initialState, action) => { ... };
0 голосов
/ 15 мая 2019

В index.js после createStore и до ReactDOM.render вы можете сделать что-то вроде 

if (localStorage.JWT) {
  const payload = decode(localStorage.JWT);
  const user = {
    token: localStorage.JWT,
    email: payload.email,
    confirmed: payload.confirmed
  };
  setAuthorizationHeader(localStorage.JWT);
  store.dispatch(userLoggedIn(user));
}

. Вы можете проверить этот токен на сервере, если у него есть дата истечения срока действия, или напрямую отправить любоесвязанная функция авторизации / аутентификации, которая выбирает что-то с сервера.И наоборот, в зависимости от логики вашего приложения, вы можете перенаправить в форму входа в систему или, например, отобразить гостевые маршруты, где эта кнопка отключена.Или только этот атрибут кнопки disable зависит от состояния isAuthenticated в редуксе.

  • Я просто взял его из старого проекта, не обязательно все эти атрибуты находятся в локальном хранилище
...