모술/2022/04/16/ ② React, Redux Toolkit , Redux-Saga 설정

리덕스 툴킷으로 리덕스 사가 사용한다.

리덕스 사가란, 리덕스를 사용할 때 특정 리듀스 액션을 관찰하고 있다가, 그 액션이 실행 되면서 동시에 다른 행동을 취할 수 있게 해주는 함수이다. 리덕스 사가 이펙트함수란,

call : 함수를 동기적으로 실행

all : 매개변수 배열안에 있는 함수들을 실행

fork : 함수를 비동기적으로 실행

takeLatest : 짧은 시간내에 액션이 관측되면 그 액션이 들어온 맨 마지막 것만 받아들여서 실행

delay : 매개변수에 있는 시간만큼 잠깐 멈춤

put : dispatch() 와 동일 등의 이펙트 함수가 있다. 이러한 이펙트 함수로 사용자들이 편리하게 함수를 구현할 수 있다.

 

// Saga.js function* join(action: PayloadAction<JoinPayload>) {     try {              const result: UserDataPayload = yield call(         userAPI.joinAPI,         action.payload       );       yield put(joinSuccess(result));       window.location.href = 'users/login'       alert("🎄회원가입을 축하드립니다🎄")     } catch (error: any) {       // alert("아이디오류")       yield put(joinFailure(error));     }   } // API.js import axios from "axios"; function joinAPI(data: JoinPayload) {   return axios.post(`${SERVER}users/join`, JSON.stringify(data), { headers }); }