redux 구조 적용
redux 기본 구조를 만든다. 먼저 redux tutorial을 선행학습을 해야만 된다.
구조는 다음과 같다.
redux
+ reducers
– index.js
– players.js
– actions.js
– actionTypes.js
– store.js
redux/reducers/players.js
redux/reducers/index.js
redux/store.js
index.jsx
App.jsx – players 데이터 받기
playerReducer에 players 데이터를 정의하였으므로 usetState는 삭제하고 이것을 가져와야 한다(L3)
useState를 삭제하였으므로 setPlayrs 부분을 모두 주석 처리해야 에러가 나지 않을것이다(L11, L21, L35, L47).
여기까지하고 테스트하면 화면에 players는 나타나지 않을것이다. store에 빈 배열의 players를 가져왔기 때문에 정상이다.
App.jsx
App.jsx – 초기 데이터 dispatch
액션타입 정의
redux/actionTypes.js
액션 creator 정의
redux/actions.js
reducer 로직 작성
redux/reducers/players.js
액션 디스패치
App.jsx
화면에 players가 나타남을 확인한다. 크롬 디버거 탭 redux에서 액션이 디스패치되는지도 확인한다.
App.jsx – player 추가 dispatch
액션타입 정의
redux/actionTypes.js
액션 creator 정의
redux/actions.js
reducer 로직 작성
redux/reducers/players.js
App -> AddPlayerForm 으로 함수를 전달해서 부모와 자식간의 통신을 했는데 이제 AddPlayerForm 에서 직접 액션을 dispatch할 수 있으므로 App 컴포넌트에서 AddPlayerForm으로 내려보낸 addPlayer props를 삭제한다(L13). 또한 handleAddPlayer 함수도 삭제한다.
App.jsx
AddPlayerForm 에서는 부모로부터 받은 props 를 통해서 함수를 호출하는게 아니라 store에 직접 dispatch 한다. Promise 패턴은 async-await 패턴으로 바꾸었다.
components/AddPlayerForm.jsx
player 추가가 되는지 확인한다. 크롬 디버거 탭 redux에서 액션이 디스패치되는지도 확인한다.
App.jsx – player 삭제 dispatch
액션타입 정의
redux/actionTypes.js
액션 creator 정의
redux/actions.js
reducer 로직 작성
redux/reducers/players.js
App -> CustomPlayer -> Player 으로 함수를 전달해서 부모와 자식간의 통신을 했는데 이제 Player 에서 직접 액션을 dispatch할 수 있으므로 App 컴포넌트에서 CustomPlayer으로 내려보낸 addPlayer props를 삭제한다. 또한 handleAddPlayer 함수도 삭제한다.
App.jsx
Player 컴포넌트에서 삭제하는 액션을 직접 디스패치한다(L9)
components/Player.jsx
player 삭제가 되는지 확인한다. 크롬 디버거 탭 redux에서 액션이 디스패치되는지도 확인한다.
App.jsx – handleScore dispatch
액션타입 정의
redux/actionTypes.js
액션 creator 정의
redux/actions.js
reducer 로직 작성
redux/reducers/players.js
App -> CustomPlayer -> Player -> Counter으로 함수를 전달해서 부모와 자식간의 통신을 했는데 이제 Counter 에서 직접 액션을 dispatch할 수 있으므로 App 컴포넌트에서 CustomPlayer으로 내려보낸 changeScore props를 삭제한다. 또한 handleChangeScore 함수도 삭제한다.
App.jsx
Counter 컴포넌트에서 액션을 직접 디스패치한다.
components/Counter.jsx
score가 바뀌는지 확인한다. 크롬 디버거 탭 redux에서 액션이 디스패치되는지도 확인한다.