라우터 + 리덕스 thunk
이어서 API 재로딩 문제를 해결해보장. 해결 방법은 두 가지가 있다.
1. 데이터 존재하면 받아오지 않게 하기
이렇게 useEffect에서 관리를 해주면 뒤로가기를 했을 때 재로딩이 되지 않는다!!!!
2. 로딩 새롭게 할 때 로딩중... 렌더 안 하기
장점으로 최신 데이터 업데이트를 하면서 사용자 경험 good이 된다. modules/posts.js - posts 리듀서 부분과 lib/asyncUtils.js - handleAsyncActions.js의 로딩 파트를 수정하면 된다.
lib/asyncUtils.js - handleAsyncActions.js
keepData라는 변수를 만들어서 로딩을 할 때도 데이터를 유지하게 만든다.(어렵다)
modules/posts.js - posts 리듀서
true를 인자로 넘긴다. 마지막으로 container 부분에 로딩을 수정한다.
이번엔 post 조회 시 재로딩 해결
post 조회 시 재로딩을 해결하려면 앞선 방법으로는 불가능하다!
왜냐하면 동적 라우팅이기 때문에(파라미터 값에 따라 결과물 다르다.)
다른 방식으로 해결 방법이 있다!
1. 컴포넌트가 언마운트 될 때 포스트 내용 비우기!
- 이 작업을 하려면 posts 리덕스 모듈에 CLEAR_POST 라는 액션이 필요하다.
무슨 말인지 모르겠지만 일단 해보자.
reducer에 추가한다. initial로 돌려버리는 것이다... 어렵다. 그리고 useEffect clean up(언마운트할 때)에 dispatch한다.
여기서 이슈는 이미 가져온 post도 재요청하는 것이다. 또 해결해보자. 해결할 게 너무 많아.
- 이 문제를 해결하기 위해서는 posts 모듈의 state 구조를 바꿔야 한다.
{
posts: {
data,
loading,
error
},
post: {
data,
loading,
error,
}
}현재 구조에서
{
posts: {
data,
loading,
error
},
post: {
[id]: {
data,
loading,
error
}
}
}이렇게 바꿔야 한다. 왜인지는 오늘 처음 배우는 거니까 정확히 모르겠다. 파라미터에 따라 페이지 조회가 되니까 [id] 프로퍼티로 줘서 동적으로 관리해야 하는 건 알겠지만 저 구조가 되어야 하는 과정이 머릿속에서 그려지지가 않는다!!!
이렇게 만들려면 asyncUtils에 작성했던 함수 모두 바꿔야 하니까 새롭게 함수를 만드는 방식으로 진행한다!
1. createPromiseThunkById
defaultIdSelector라는 변수를 만들고 param를 인자로 받아서 param을 리턴한다. 비동기 작업에 관련된 액션이 어떤 id를 받는지 알아야 하는데 그래서 action.meta에 id값을 넣어준다.
난이도 급상승...
2. handleAsyncActionsById
id값을 기준으로 새로운 프로퍼티를 만들었고 [key][id]로 접근한다. 와 진짜 어렵다.
- 이제 posts 리덕스 모듈를 수정해보자
마지막으로 postContainer도 수정.
어질어질..
와... 한 번 데이터를 받아오면 다시 로딩창이 없다. 진짜 장난아니네. 아름다워
- 진짜 마지막으로
true인자로 주고 !data 조건 주면 완성이다.
thunk에서 라우터 연동하기
thunk 내에서 라우터 구현할 때! 예를 들자면, 로그인 요청을 하는데 로그인이 성공 할 시 / 경로로 이동시키고, 실패 할 시 경로를 유지 하는 형태로 구현 할 수도 있죠.
- customHistory 만들어서 적용하기
thunk 에서 라우터의 history 객체를 사용하려면, BrowserHistory 인스턴스를 직접 만들어서 적용해야합니다. index.js 를 다음과 같이 수정해주세요.
redux-thunk 의 withExtraArgument 를 사용하면 thunk함수에서 사전에 정해준 값들을 참조 할 수 있습니다.
추가추가! 그리고 post 모듈에 함수 추가
router가 아니라 browerRouter를 사용하면 작동 안 한다!
- 완성
어마무시하게 어려운데 빨리 실무에서 적용하고 싶다!!
출처 : https://react.vlpt.us/redux-middleware/06-fix-reloading.html
