To-do 리스트 Redux를 사용하여 리팩터링 하기 #84
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
deleteTask, addTask, updateTaskTitle 함수 만들어서 App컴포넌트와 분리시키기
useSelector으로 원하는 데이터 사용 dispatch로 action 전달사용 관심사 분리로 빼놓은 함수들을 action로 사용
액션에 맞춰서 데이터 수정
관리할 데이터인 store는 props로 전달
jest.mock('react-redux')로
react-router 모듈을 mock으로 만들었다.
그래서 하위 함수들을 모두 mock으로 만들었다.
13번줄
userSelector.mockImplemention()
로 selector함수 받아서 tasks 데이터 받고 가짜 useSelector을 실행시킨다.
moonkii
reviewed
Dec 22, 2021
Collaborator
moonkii
left a comment
moonkii
left a comment
There was a problem hiding this comment.
점진적으로 개선해 나가는 구조가 보이는 것 같아서 좋은 것 같아요 ;)
말씀하신대로 아직까지는 Redux의 점유율이 높기도하고 다양하게 써보시면 좋기 때문에 열심히 해보시면 도움이 많이 되실거에요 ;)
src/App.jsx
Outdated
Comment on lines
5
to
9
| const initialState = { | ||
| newId: 100, | ||
| taskTitle: '', | ||
| tasks: [], | ||
| }; |
src/App.jsx
Outdated
Comment on lines
11
to
32
| function updateTaskTitle(taskTitle) { | ||
| return { | ||
| type: 'updateTaskTitle', | ||
| payload: { | ||
| taskTitle, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| function addTask() { | ||
| return { | ||
| type: 'addTask', | ||
|
|
||
| }; | ||
| } | ||
|
|
||
| function deleteTask(id) { | ||
| return { | ||
| type: 'deleteTask', | ||
| payload: { | ||
| id, | ||
| }, |
src/store.js
Outdated
| tasks: [], | ||
| }; | ||
|
|
||
| function reducer(state = initialState, action) { |
Collaborator
There was a problem hiding this comment.
reducer 도 이제 분리해주면 좋을 것 같아요 👍
InputContainer, ListContainer 로 관심사 분리
InputConatainer, ListContainer로 렌더한다.
다음 함수들을 구현 reduceUpdateTaskTitle reduceAddTask reduceDeleteTask
Author
리뷰이번 Redux강의를 한번 제대로 실습 해보니 ReduxRedux를 구현하고자 reducer와 store, actions로 분류하는 과정이 Redux를 이해하는데 큰 도움이 되었습니다. 관심사 분리Container의 필요성이 공감되었습니다. 테스트 코드테스트 코드 작성이 구현하는 것만큼 시간이 걸렸습니다. 감사합니다!! |
moonkii
approved these changes
Dec 23, 2021
Collaborator
moonkii
left a comment
moonkii
left a comment
There was a problem hiding this comment.
리덕스도 잘 적용하셨고 테스트 코드도 깔끔하게 잘 작성하신 것 같아요!
주간회고 작성후 공유해주시면 merge 하도록하겠습니다
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
리뷰
Redux를 전에 여러번 시도했지만 이번 기회에 제대로 이해가 되었습니다. 감사합니다.
최근에 Recoil이 나왔는데 Redux를 배우는 동기부여가 조금 떨어졌었습니다.
아직은 리덕스가 더 많이 쓰이고 있어서 끝까지 참고 공부해보았습니다.
과제를 진행하다보니 내부 기능들을 까먹게 되는 것같습니다.
복습의 필요성이 더 커지는 과제였습니다.
mockImplementation처럼 jest문법들을 계속 접하게되어 jest를 계속 공부하는 좋은 계기였습니다.
감사합니다!
목표