next+ts15일차 Saga Login페이지

유튜브: https://www.youtube.com/watch?v=7yLiEJ9MXlw 
깃허브: https://github.com/qjawns0222/caremaker/tree/next+ts-15%EC%9D%BC%EC%B0%A8-Saga-login 

오늘은 Login페이지 만들고 Saga랑 createstore 대신 configureStore을 사용했습니다.

action

actiontypes

reducers/loginsaga

/reducer/Sagas/index

Saga관련 함수들은 function*로 해주어야됩니다.

Login을 호출하면 type으로 Login_PENDING으로 넘겨주고 그걸로 인해서 관련된 action 이 실행되고 

takeLatest로묶어준 checklogin으로 넘어가게 됩니다.

그리고 redux만들어준곳에서 인식하도록 rootSaga로 이런게 있다고 묶어주고 

sagamiddleware.run(rootSaga); 로 실행되도록 해주고 미들웨어로 넣어주면 됩니다.

onfigureStore({ reducer: reducers, middleware: [sagamiddleware], devTools: process.env.NODE_ENV !== "production", });

이거는 우리가 함수 만들고 일일이 하던것들을 이렇게 쉽게 넣게 해줍니다. devTools 도 저렇게 조건 넣어주면 적용되고  미들웨어도 저렇게 쉽게 넣어주고 preloaddata그거 있는데 combindreducer하면 안되더라고요 그래서 빼줬습니다.

logincontainer

login component

import { RefObject } from "react";

import { useSelector } from "react-redux";

import { useDispatch } from "react-redux";

import { CounterState, RootState } from "../store/types/state";

const Login = ({

  idref,

  passwordref,

  login,

}: {

  idref: RefObject<HTMLInputElement>;

  passwordref: RefObject<HTMLInputElement>;

  login: () => void;

}) => {

  return (

    <div>

      <div className="section">

        <div className="inputboxs">

          <div className="title">로그인 해주세요</div>

          <div className="idbox">

            <div className="title">아이디:</div>

            <input ref={idref} className="id" />

          </div>

          <div className="passwordbox">

            <div className="title">비밀번호:</div>

            <input ref={passwordref} className="password" type="password" />

          </div>

          <div className="buttons">

            <button onClick={login} className="login">

              로그인

            </button>

          </div>

        </div>

      </div>

      <style jsx>

        {`

          .section {

            height: 850px;

            width: 100%;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            background-color: yellow;

          }

          .inputboxs {

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            min-height: 40%;

            min-width: 30%;

            max-width: 100%;

            background-color: #1afff3;

            border: 4px solid #1afff3;

            border-radius: 10px;

          }

          .inputboxs > .title {

            height: 20%;

            color: #c24889;

            font-size: 28px;

            font-weight: bolder;

          }

          .inputboxs > .idbox,

          .passwordbox {

            display: flex;

            justify-content: center;

            margin: 1%;

            width: 100%;

          }

          .inputboxs > .idbox,

          .passwordbox > .title {

            font-size: 18px;

            font-weight: bolder;

          }

          .inputboxs > .idbox > .title {

            padding-left: 18px;

          }

          .inputboxs > .buttons {

            display: flex;

            width: 90%;

            justify-content: flex-end;

            font-size: 28px;

            font-weight: bolder;

          }

          .inputboxs > .buttons > .login {

            font-size: 18px;

            font-weight: bolder;

            padding: 2%;

            background-color: #6856f8;

            border-radius: 10px;

          }

        `}

      </style>

    </div>

  );

};

export default Login;

특별한건 없고 클릭하면 해당 정보가 dispatch로 넘어가게 해줬습니다.

async를 써보기 위해서 api로 받아서 처리하기위해 회원가입은 어떻게 만드는지 감이 안잡혀서 뺐습니다.