[Sleact]ゆったりパンツクローンコード-ワークスペースの作成
ワークスペースの作成
layouts/Workspace.tsx
import fetcher from '@utils/fetcher';
import axios from 'axios';
import React, { FC, useCallback } from 'react';
import useSWR from 'swr';
const Workspace: FC = ({ children }) => {
const { data, error, revalidate } = useSWR('http://localhost:3095/api/users', fetcher);
const onLogout = useCallback(() => {
axios
.post('http://localhost:3095/api/users/logout', null, {
withCredentials: true,
})
.then(() => {
revalidate();
});
}, []);
return (
<div>
<button onClick={onLogout}>로그아웃</button>
{children}
</div>
);
};
export default Workspace;
他の構成部品と同じ要求を実行できます.ログインロジック
順番が少し不順なので、ログインロジックを再確認させていただきます.
pages/LogIn/index.tsx
import useInput from '@hooks/useInput';
import { Success, Form, Error, Label, Input, LinkContainer, Button, Header } from '@pages/SignUp/styles';
import fetcher from '@utils/fetcher';
// import fetcher from '@utils/fetcher';
import axios from 'axios';
import React, { useCallback, useState } from 'react';
import { Link, Redirect } from 'react-router-dom';
import useSWR from 'swr';
const LogIn = () => {
const { data, error, revalidate } = useSWR('http://localhost:3095/api/users', fetcher, { dedupingInterval: 100000 });
const [logInError, setLogInError] = useState(false);
const [email, onChangeEmail] = useInput('');
const [password, onChangePassword] = useInput('');
const onSubmit = useCallback(
(e) => {
e.preventDefault();
setLogInError(false);
axios
.post('http://localhost:3095/api/users/login', { email, password }, { withCredentials: true })
.then(() => {
revalidate();
})
.catch((error) => {
setLogInError(error.response?.data?.statusCode === 401);
});
},
[email, password],
);
if (data) {
return <Redirect to="/workspace/channel" />;
}
return (
<div id="container">
<Header>Sleact</Header>
<Form onSubmit={onSubmit}>
<Label id="email-label">
<span>이메일 주소</span>
<div>
<Input type="email" id="email" name="email" value={email} onChange={onChangeEmail} />
</div>
</Label>
<Label id="password-label">
<span>비밀번호</span>
<div>
<Input type="password" id="password" name="password" value={password} onChange={onChangePassword} />
</div>
{logInError && <Error>이메일과 비밀번호 조합이 일치하지 않습니다.</Error>}
</Label>
<Button type="submit">로그인</Button>
</Form>
<LinkContainer>
아직 회원이 아니신가요?
<Link to="/signup">회원가입 하러가기</Link>
</LinkContainer>
</div>
);
};
export default LogIn;
ログインページは上記のコードで書かれています.最初のdata
はfalseなので、次のjsx
文を直接実行してログインをコミットし、revalidate
要求data
をコミットします.今回はdata
を含みます.したがって、再レンダリング中にif(data)...
のドアに掛けられ、Workspace
にページが再起動されます.mutate
前のコードでは
revalidate
が使用されていましたが、欠点があります.もう一度お願いします.補足できるのはmutate
です.revalidate
は、要求をサーバに返信してデータを取得し、mutate
は、要求をサーバに送信せずにデータを変更する.const LogIn = () => {
const { data, error, revalidate, mutate } = useSWR('http://localhost:3095/api/users', fetcher, {
dedupingInterval: 100000,
});
const [logInError, setLogInError] = useState(false);
const [email, onChangeEmail] = useInput('');
const [password, onChangePassword] = useInput('');
const onSubmit = useCallback(
(e) => {
e.preventDefault();
setLogInError(false);
axios
.post('http://localhost:3095/api/users/login', { email, password }, { withCredentials: true })
.then((response) => {
mutate(response.data, false);
})
.catch((error) => {
setLogInError(error.response?.data?.statusCode === 401);
});
},
[email, password],
);
...
mutate
を使用して、私の情報をdata
に入れます.mutate
を使用すると、サーバに要求を送信する前に情報を更新し、サーバとペアリングすることができ、shouldRevalidate
の値をfalseに設定すると、このような状況の発生を阻止することができる.例えばInstagramポイントHeartでは色の変化に応じてHeartが反応し、実際にサーバに送信される前にHeartが変化します.これは
mutate
を使用しているので、ユーザー体験がよくなります.(OPTIMISTIC UI)
デフォルトでは、UIが最初に反映されます.Reference
この問題について([Sleact]ゆったりパンツクローンコード-ワークスペースの作成), 我々は、より多くの情報をここで見つけました https://velog.io/@shinwonse/Sleact-슬랙-클론-코딩-Workspace-만들기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol