1

Olá!

Tenho um arquivo contendo uma única função, ela deve retornar um boleano apartir de uma condição utilizando os dados do storage do redux. Eu consigo conectar o arquivo sem ser um ReactComponent ao Redux?

A função é responsavel pela autenticação da aplicação. Sendo assim:

import { connect } from "react-redux";

const isAuthenticated = ({ user }) => {
  console.log("auth.js", user);
  return true;
}

const mapStateToProps = (state) => ({
  user: state.user,
});

export default connect(mapStateToProps, null)(isAuthenticated);

No arquivo de rotas tento chamar essa função isAuthenticated():

import React from "react";
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import isAuthenticated from "./utils/auth";

const PrivateRoute = ({ component: Component, ...rest }) => {
    if (isAuthenticated()) return <Route component={Component} {...rest} />;
    else
        return (
           <Redirect
           to={`/login?redirect=${window.location.pathname}`}
           {...rest}
           />
        );
};

const AnonymousRoute = ({ component: Component, ...rest }) => {
  if (!isAuthenticated()) return <Route component={Component} {...rest} />;
  else return <Redirect to={`/app`} {...rest} />;
};

return (
    <BrowserRouter>
      <Switch>
        ...ROTAS
      </Switch>
    </BrowserRouter>
);

export default connect(mapStateToProps)(Routes);

No entanto recebo o seguinte erro: Erro javascript

Ps.: Sou iniciante no mundo React JS. Obrigado!

1 Resposta 1

1

Você está fazendo errado. Você deve criar um hooks para isto já que está usando o react funcional.

Primeiro, deve criar um hooks com a finalidade de fazer solicitação rest, pois para verificar se o usuário é valido ou não, teria que ver isto no lado do server.

Aqui eu usei o próprio fetch do javascript mas você pode usar o axios caso queira.

hooks/fetch.js

const useFetch = (url, options) => {
  const [response, setResponse] = React.useState(null);
  useEffect(async () => {
      const res = await fetch(url, options);
      const json = await res.json();
      setResponse(json);
  },[]);
  return response;
};
export default useFetch

Depois vamos criar o hooks que verifica a autenticação, este hooks solicitará o useFetch para buscar no server a resposta.

*hooks/auth.js

import useFecth from "./hooks/fetch";
const useAuthenticate = () => {
  const { data, loading, error } = useFetch("ENDERECO_API");
  const [isAuth, setAuth] = useState(false);
  useEffect(() => {
    setAuth(!loading && !error);
  }, [data]);

  return isAuth;
};

Agora basta chamar este hooks onde vc deseja verificar se o usuário está validado ou não, em seu exemplo, ficaria mais ou menos assim:

const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuth = useAuth();
  isAuth ? (
    <Route component={Component} {...rest} />
  ) : (
    <Redirect to={`/login?redirect=${window.location.pathname}`} {...rest} />
  );
};

Usei um if ternário para verificar, mas pode ser if básico mesmo.

Tirei o HOC pois isto não é mais necessário neste conceito já que o hooks veio com este intuito já.

Espero que isto lhe atenda ou dê pelo menos uma ideia melhor de como achar uma solução melhor.

1
  • Olá, desde já obrigado pela contribuição. Referente à citação a respeito da verificação no server, é exatamente isso que eu gostaria de fazer. Meus dados de token estão persistidos no localStorage, e preciso recupera-los usando o react-redux. Por esse motivo preciso fazer a conexão. Commented 4/05/2020 às 10:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .