모술/2022/04/16/ ⑤ Next.js + redux toolkit

createSlice로 기존의 리덕스에서 액션 타입, 액션 생성함수, 리듀서를 다 따로 만들어주던걸 한 번에 만든다.

 

// 슬라이스 하단부 리듀서 & 액션 리턴 const { reducer, actions } = userSlice; export const { loginAction, logoutAction } = actions; export default reducer;

 

Genragtor Function 이란,

function* FunctionName() {} 이런식으로 쓰이게 되는데, 비교적 쉽게 설명하면, yield 가 나오기 전 까지 실행하다가 yield에 해당하는 값을 return하고, (함수면 호출하고) next()을 기다리는 함수이다.

 

Redux Saga Effect 들은 이 Generator 함수를 사용해서 이루어진다.

/* 리덕스 */ dispatch({   type: action.type,   payload: data }) /* 리덕스 툴킷 */ dispatch(action(data))

 

sagaMiddleware를 불러와서 추가해주시면 되는데 Next.js를 이용하게되면 sagaTask를 지정해주어야 한다. 해당 테스트는 Next.js를 사용했기 때문에 _app.tsx 파일에서 withReduxSaga를 하나 더 추가해서 App을 감싸준다.

export default wrapper.withRedux(withReduxSaga(App));

 

기존 createStore 보다는 RTK에서 제공하는 configureStore 를 통한 store 생성을 추천한다

개발도구 on,off 옵션 설정 주기.

> 클라이언트를 관리자권한으로 VS코드를 오픈한다.

> 터미널에서 클라이언트에 라이브러리 추가한다.

> pages 내부 index.js 를 코딩한다.

import axios from "axios"; import React, { useCallback } from 'react'; const Button = ({ onClick }) => (   <button onClick={onClick}>현재 시간</button> ); export default function Home() {   const onClick = useCallback(() => {     axios.get("http://localhost:5000/api/now").then((res) => {       alert(JSON.stringify(res.data))       var data = res.data;       document.getElementById("timeZone").innerHTML = '<h1>현재시간: '+data.now+'<h1>'     });   });   return (<>     <h1>HOME</h1>     <Button onClick={onClick} />     <div id="timeZone"></div>     </>   ) }

> 터미널에서 도커로 넥스트를 실행한다.

 

docker build –tag deepbrain .  // 마지막 . 추가 docker run -d -p 3000:3000 deepbrain

수동으로 localhost:3000 입력한다.

// routers/user.js const express = require(‘express’) const router = express.Router() router.post(‘/’, async (req, res) => {    await User.create({       email : req.body.email,       nickname : req.body.nickname,       password : req.body.password }) }) module.exports = router // sagas/user.js function signUpAPI(data){    return axios.post(‘/’, data) } function* signUp(action){    try{    const result = yield call(signUpAPI, action.data);    console.log(result)    yield put({       type: SIGN_UP_SUCCESS,    }); }catch (err){    type: SIGN_UP_FAILURE,    error: err.response.data, } } const onSubmit = useCallback(() => {    dispatch({       type: SIGN_UP_REQUEST,       data: { email, password, nickname },    }); }, [ email, password, passwordCheck, term ] );

<form                   name="registerForm"                   noValidate                   className="flex flex-col justify-center w-full"                   onSubmit={handleSubmit(async (data) => { await dispatch(joinRequest({                      ...data,                     //  user_interests: document.getElementsByName('user_interests'),                     // job:document.getElementsByName('job')                     })) })}                 > // slice.js import { configureStore, createSlice, PayloadAction } from "@reduxjs/toolkit"; const userSlice = createSlice({   name: "users",   initialState,   reducers: {     joinRequest(state: UserState, _action: PayloadAction<JoinPayload>) {       state.userLoading = true;       state.error = null;     }, …}