리액트 심화주차 개인과제 3일차

오늘 과제 진행에 대해 남겨본다. 팬레터를 추가하고 조회하는 기능을 json-server와의 API통신을 통해 구현했는데 redux toolkit의 thunk 기능을 사용했다.

CRUD 전역관리를 위해 팬레터에 대한 모듈을 새로 만들었고,툴킷에서는 createAsyncThunk라는 API를 이용해 thunk함수를 만들 수 있다. 첫번째 인자로 action value, 두번째 인자로 함수를 넣어주었고 인자로 컴포넌트에서 보내준 payload, thunk에서 제공하는 여러가지 기능을 꺼내 사용한다.

=> axios.get()은 Promise를 반환한다. 반환된 Promise의 fulfilled나 rejected된 것을 처리하기 위해 async/await를 사용했다. 그리고 요청이 성공하고 실패할 때 실행되는 것을 나누기 위해 try catch 구문을 사용했다.
가져온 데이터를 store로 dispatch하기 위해서 툴킷에서 제공하는 fulfillWithValue, rejectWithValue API를 사용했다. fulfillWithValue는 네트워크 요청에 성공한 경우 dispatch해주고, rejectWithValue는 네트워크 요청에 실패한 경우 dispatch해준다.

어디로 dispatch? extraReducers!!

=> extraRecuders에서는 pending, fulfilled, rejected에 대해 각각 어떻게 새로운 state를 반환할 것인지 구현할 수 있다.

팬레터를 최신순으로 나타나게 하고 싶었는데, 공식문서를 보니 json-server에서 데이터를 가져올 때 url?_sort=기준&_order=desc 이렇게 하면 된다고 나와있었다. 그런데 적용해보니 팬레터 작성 후 새로고침을 해야만 최신순으로 정렬이 되는 것이었다.(ㅠㅠ) 그것은 db에서는 바로 정렬이 되는데 UI는 따로 정렬을 해서 나타내야했다. 그래서 나는 sort를 이용해 정렬해주었다 코드는 다음과 같다.

하루 12시간+@ 코딩을 하고 있는데 생각보다 진도가 잘 안나간다,, 오늘은 json-server를 이용하고 redux-toolkit thunk기능까지 적용해보려고 하니 더 오래걸린 것 같다. 익숙해질때까지 많이 써봐야지!!