React и Redux теряют государство

Question

Надеюсь, у вас все хорошо. Я новичок в мире редукции. Я учусь и работаю над проектом регистрации звонков. У меня есть несколько вопросов, и было бы замечательно, если бы кто-то мог направить меня, делаю ли я это неправильно или сказал мне альтернативу.

Я использую JWT для аутентификации пользователя. После того, как пользовательские данные проверены. Я отправляю успешное действие, и в редукторе я устанавливаю состояние с подтвержденным значением true и ответ. Я также храню токен и expiryTime в localStorage

В корневом файле, который является индексным файлом. Я проверяю, существует ли токен в localStorage, и если да, то отправляю вход в действие.

Все работает. Но я теряю другие значения, такие как ответ от сервера. Когда он вошел в первый раз. Как я могу решить эту проблему?

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

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

Я передал новый ключ в mapStateToProps. я и сохранил начальный из localStorage в нем, и он работает нормально. Это правильный способ сделать это?

С уважением Встретиться

            const  SignedInLinks  = (props) => {                                                      
            return (
                <ul  className="right">
                    <li><NavLink  to="/signin"  onClick=        
                    {props.signOut}>Log Out</NavLink></li>
                    <li><NavLink  className="btn btn-floating pink lighten-1"  to="/">
                    {props.ii  ?  props.ii  :  null  }
                    </NavLink></li>
            </ul>
            )}

            const  mapStateToProps  =  state  => {
                return {
                    auth:  state.auth,
                    ii:  window.localStorage.getItem('ui')
                }
            }
            export  default  connect(mapStateToProps, { signOut })(SignedInLinks);

Answer 1

Вместо использования localStorage в mapStateToProps инициализируйте ваше состояние ii в вашем редукторе, соответствующее этому состоянию, а затем передайте его вашему компоненту через mapStateToProps. Как то так.

const iiReducer = (state = window.localStorage.getItem('ui') || false, action) => {
  /*.
  .
  . Other Logic
  .
  .*/
  return state
}

и затем используйте его как обычно из состояния магазина

const  mapStateToProps  =  state  => {
    return {
        auth: state.auth,
        ii: state.ii
    }
}

Надеюсь, это поможет!

Answer 2

Полагаю, у меня есть представление о том, в чем проблема (я новичок в реакции и редукции, так что скажите мне, если я говорю чепуху).

Вы говорите, что хранитетокен в localstorage (кстати, этого делать не рекомендуется, рекомендуемый способ - сохранить его в cookie-файле), и если в localstorage найден действительный токен, войдите в систему. Я предполагаю, что вы сохранили ответ отсервер (включая значок) в состоянии приложения или в магазине приставок?В этом случае эта информация будет удалена при обновлении браузера (f5), поэтому больше не будет загружаться.

Решение состоит в том, чтобы обеспечить загрузку соответствующих данных при монтировании компонента, поэтому вваш метод componentDidMount (если у вас его нет, создайте его) и задайте состояние в этом методе.