코드 개선 사항 + 질문 리스트

1.

deleteCode(codeKey)
            .then(() => {
              dispatch(codeAction.getCodeList({ target: "codeList" }));
              codeForm.resetFields();
            });

기존 코드중 잘못된 부분 개선 

 

api를 집접 호출하는 deleteCode 와 dispatch 같이 사용하는 부분을 발견하여 개선

 

 

 

2. 리덕스 툴킷을 사가보다 먼저작성하는걸 권장한다고 하던데 여기서 사가가 먼저 나오는 이유가 있을까요?

 리덕스 툴킷을 사가보다 먼저작성하는걸 권장

코드순서랑 상관없이 적용 되는 순서(index에서)가 우선이라는 뜻

 

코드페이지 내부에서는 slice가 밑에 줄에 있는 이유 : 위에서 적용한 액션 변수 가 쓰이고 사가가 쓰이지 않을때도 있기에 코드스타일을 이렇게 정함.

 

 

3. 차이점 in common page

기존 코드

try {
  deleteCode(codeKey)
    .then(() => {
      dispatch(codeAction.getCodeList({ target: "codeList" }));
      codeForm.resetFields();
    });
} catch(e) {
  console.error(e);
}

  console.error(e);
}

> 동기적?

내가 개선한 코드

deleteCode(codeKey)
  .then(() => {
      dispatch(codeAction.getCodeList({ target: "codeList" }));
      codeForm.resetFields();
  })
  .catch((e) => {
    console.error(e);
  })

> 비동기적?

어떻한 것을 선택해야 할지

 

둘다 잘못된 코드 

>>> 

에러처리를 따로 해주기에 중복된 작업임. 저부분만 한번더 확인할거면 이렇게 작성하는것은 의미가 있으나 큰 필요성은 없음

 

 

4. 

export const getCodeListSaga = createRequestSaga(
  GET_CODE_LIST,
  codeAPI.getCodeList,
  "codeList"
);
에서 export 한 이유?


다른곳에서 안쓰이고 
export function* codeSaga() {
  yield takeLatest(GET_CODE_LIST, getCodeListSaga);
  yield takeLatest(GET_CODE, getCodeSaga);
  yield takeLatest(INSERT_CODE, insertCodeSaga);
  yield takeLatest(UPDATE_CODE, updateCodeSaga);
}
여기서만 getCodeListSaga 가 쓰임

 

 

이전 버전의 코드에서는 사가문 자체를 불러다 쓰는 경우도 있어서 다음과 같이 작성 > 혹시모를 오류보다는 export정도는 사용하는것을 권장

 

 

5. reducer가 작동을 멈춘,,, ㅠㅜ

이유 - 백쪽 파일이 git repo 기준 이름이 아닌 url 이름 인 파일을 설치 했어야함 > 개선필요 추후 변경 건의

별개로 정리한 작동 구조

 

0.  http://127.0.0.1:8000/manage/codetest/ 에서 api 넘겨 주는것 확인

 1. useSelector 를 통해 스토어에 있는 codeTestReducer를 가져오고 거기 안에 있는 codeList 가져오기
     2. codeList 를 확인하니 [object object]>> json으로 열어보니 안에 값이 다 null
     3. codeTestReducer 는 codeTestSlice.reducer (codeTestSlice. 안 reducers 에 getCodeList 있음)
     4. store 는 큰게 만든 createLimeStore가 있고 거기안에 store가 있어서 자동으로 sagaMiddleware 실행
     5. rootSaga 에서 codeTestSaga 타고 들어감
     6. 가장 최근 요청된 getCodeListSaga 실행
     7. codeAPI 에서 getCodeList 실행해서 api 가져옴
     8. getCodeList 실행하면 백앤드의 manage/codetest/ 에서 api axios로 가져옴

 

 

 

개선코드

const target =
      action.payload && action.payload.target ? action.payload.target : null;
    try {
      const response = yield call(request, action.payload);
      const payload = target ? { ...response, target } : response;

>>

const target = action.payload?.target || null; 
    try {
      const response = yield call(request, action.payload);
      const payload = target ? { ...response, target } : response;

 

 

+readme 에 추가

(18버전에서 작동 안하는것을 확인  + 17이하의 버전으로 구동할것을 권장. NVM 다운로드 추천)
   https://github.com/coreybutler/nvm-windows