저번 게시물 폴더 열어서 코드 열어주고
npm i redux-devtools-extension -D
npm i redux-promise-middleware
이렇게 두개를 설치해주고
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd/related?hl=ko
Redux DevTools
Redux DevTools for debugging application's state changes.
chrome.google.com
여기로 이동해서 이것도 다운 해주자
dev tools는 우리가 콘솔로그 찍어서 확인하던것들을 확인하기 쉽게 도와주는 틀이라고 생각하면 좋다.
그리고 promise는 async 비동기 함수를 편하게 쓰기위한 것이다.
그럼 이제 시작 해보겠다.
redux/store.js
import { applyMiddleware, createStore } from "redux";
import promise from "redux-promise-middleware";
import thunk from "redux-thunk";
import fileReducer from "./modules/reducer";
import { composeWithDevTools } from "redux-devtools-extension";
const store = createStore(
fileReducer,
composeWithDevTools(applyMiddleware(thunk, promise))
);
export default store;
이렇게 수정
composeWithDevTools()여기 안에 apply middleware을 넣어줘야지 devtools내부에서 확인이 가능하다
promise 는 applyMiddleware(thunk, promise)이렇게 applymiddleware 안쪽에 넣어주면 적용이 된다.
그럼 redux/module/user.js로 이동하자
const DATA = "DATA";
const GET_USERS = "GET_USERS";
export function indata(data) {
return {
type: DATA,
data,
};
}
export function adduser() {
return {
type: GET_USERS,
payload: async () => {
const res = await [
{ name: "mark1", id: 1 },
{ name: "mark2", id: 2 },
{ name: "mark3", id: 3 },
{ name: "mark4", id: 4 },
{ name: "mark5", id: 5 },
];
return res;
},
};
}
export default function User(state = { data: [] }, action) {
if (action.type === DATA) {
return { ...state, data: action.data };
}
return state;
}
이렇게 async await 쓰는 비동기 함수가 있따. 사실 상 별로 await가 별 기능은 없지만 설명을 위해서 넣어봤다.
우리가 users에 데이터를 넣어주던 adduser함수를 그림처럼 바꾸면 우리생각에는 GET_USERS가 type으로 전달되고 저 res가 데이터로 전달 될거라고 생각할것이다. 그럼 devtools로 한번 확인해보자
npm start해서 콘솔창을 열어보자
그럼 이렇게 뜨는데 GET_USERS 가 아니고 앞에 글자가 더붙어서 뭐가 있다.
분명 type:GET_USERS 전달해줬는데 이상하게 실려있다.
이게 우리가 설치한 promise이다 즉 pending은 데이터를 가져오기 시작한 타이밍이고
FULFILED는 데이터를 다가져오고 나서이다 저거 두개를 이용해서 데이터에 어떤 처리를 하거나 데이터를 추가 해줄수 있다. 그럼 그에 맞는 코드를 짜보자
redux/user.js 에서
const GET_USERS_PENDING = "GET_USERS_PENDING";
const GET_USERS_FULDILLED = "GET_USERS_FULDILLED";
이렇게 두개의 변수를 만들어줘서 아까 나온 글자가 출력될때 어떤 처리를 할지 정해보자
if (action.type === GET_USERS_PENDING) {
console.log(GET_USERS_PENDING);
return { ...state };
}
if (action.type === GET_USERS_FULDILLED) {
return { ...state, data: action.payload };
}
이걸 User안에 넣어주자
데이터를 가져오기 시작할때는 딱히 할만한게 없으니까 로그나 찍어 주고
다가져오고 나서는 데이터를 넣어주는 것이다(오타 조심 이거때문에 저는 1시간동안 코드만 보고있었습니다....FULFIELLED인데 FULFIELED넣었어요.....)
그럼 제대로 동작되는지 확인해보자
데이터도 잘나오고 콘솔도 다 잘나온다.
그럼 마지막으로 이걸 Ducks pattern에 맞게 고쳐보자
const DATA = "DATA";
const GET_USERS = "PRACTICE/user/GET_USERS";
const GET_USERS_PENDING = "PRACTICE/user/GET_USERS_PENDING";
const GET_USERS_FULDILLED = "PRACTICE/user/GET_USERS_FULFILLED";
export function indata(data) {
return {
type: DATA,
data,
};
}
export function adduser() {
return {
type: GET_USERS,
payload: async () => {
const res = await [
{ name: "mark1", id: 1 },
{ name: "mark2", id: 2 },
{ name: "mark3", id: 3 },
{ name: "mark4", id: 4 },
{ name: "mark5", id: 5 },
];
return res;
},
};
}
export default function reducer(state = { data: [] }, action) {
if (action.type === DATA) {
return { ...state, data: action.data };
}
if (action.type === GET_USERS_PENDING) {
console.log(GET_USERS_PENDING);
return { ...state };
}
if (action.type === GET_USERS_FULDILLED) {
return { ...state, data: action.payload };
}
return state;
}
이렇게 바꺼보자
함수 이름을 User에서 reducer로 바꾸고
만들었던 변수들 앞에 create-react-app깔린 폴더이름/데이터명/원래있던 변수 이런식으로 적어주면 된다.
아까 열었던 devtools를 보면
여기도 이렇게 바껴서 어디서 pending인지 알아보기 쉽다.
오늗로 고생많으셧고 주말 잘보내세요
