Возможно ли реализовать авторизацию на сайте, без использования Redux?

Question

У меня есть пет проект, на котором я решил добавить авторизацию, только недавно начал изучать Reactjs и еще при попытке реализовать авторизацию столкнулся с проблемой, что после авторизации если воспользоваться роутингом, то сайт теряет информацию о авторизации и требует регистрацию по новой, прошерстив гугл узнал, что это обходится Redux'ом или Context'ом, но при попытке интегрировать Redux у меня возникло куча вопросов, а Context не получается изменить в дочернем компоненте, так вот, есть ли варианты попроще создать глобальную переменную, которая будет доступна в любой точке сайта? А то добавлять довольно громоздкую библиотеку ради двух строк не совсем хочется.

Answer 1

Пример использования контекста. И не надо никаких редаксов. Добавил компоненты A и B для наглядности вложенности.

import { useState, useContext, createContext } from "react";

const initialState = {
  isLoggedIn: false
};

Создаем контекст с начальным значением initialState. Далее этот контекст мы будем использовать в хуке useContext.

export const UserContext = createContext(initialState);

export function A() {
  return <B />;
}

export function B() {
  return <C />;
}

export function C() {
  const { userState, setUserState } = useContext(UserContext);

  return (
    <div>
      <button
        onClick={() =>
          setUserState((p) => ({ ...p, isLoggedIn: !p.isLoggedIn }))
        }
      >
        {!userState.isLoggedIn ? "Log in" : "Log out"}
      </button>
      <p>User is {!userState.isLoggedIn && "not"} logged in</p>
    </div>
  );
}

В родительском компоненте создаем провайдер и передаем значение userState, setUserState в пропс value. Далее мы будем их использовать в наших дочерних компонентах.

export default function App() {
  const [userState, setUserState] = useState(initialState);
  return (
    <UserContext.Provider value={{ userState, setUserState }}>
      <A />
    </UserContext.Provider>
  );
}

Demo

БЛОГ НА HUSL

Возможно ли реализовать авторизацию на сайте, без использования Redux?

Ответы (1 шт):