redux 관련 모듈 설치

redux, react-redux 라이브러리를 한꺼번에 설치한다.

모듈화 하기

+ redux/store.js : store 생성

+ index.js : Provider로 래핑하고 생성된 store 주입

+ redux/reducers/playerReducer.js 생성

+ redux/reducers/index.js

Q: store를 생성후 생성된 state는 무엇인가?

Container 컴포넌트 수정

state 데이터를 보관하고 있는 App 컴포넌트를 Container 컴포넌트라고 한다. 이제 이 state에 보관되어있는 players 데이터를 store로 옮긴다. 그리고 App 컴포넌트는 store로 부터 데이터를 주입받아야 한다.

App 컴포넌트에 state를 store로 옮긴다.

App.jsx에 useState 훅으로 선언된 부분을 useSelector 훅으로 변환한다. 그리고, setPlayers는 없으므로 일단 모두 주석처리한다.

화면은 동일하게 보이지만 redux devtools로 확인해보면 state에 players가 추가된 것을 확인할 수 있다.

removePlayer 수정

player 컴포넌트에서 x 버튼 클릭시 player 삭제하는 부분에 리덕스 훅을 적용해보자.

actionTypes를 추가한다.

action creator를 추가한다.

reducer를 추가한다.

removePlayer 액션 크리에이터를 호출해서 액션을 디스패치 하도록 수정한다.

기존에 내려주던 props는 제거해야 하므로, App 컴포넌트에 removePlayer 속성을 제거하고 handleRemovePlayer 콜백 함수도 제거한다.

addPlayer 수정

App 컴포넌트에서 속성으로 내려주는 부분을 삭제한다. handleAddPlayer 함수도 참조되는 부분이 없으니 또한 삭제한다.

redux/actionTypes.j 에 actionType을 추가한다.

action creator에 addPlayer 펑션을 추가한다. name을 파라메터로 받아들인다.

reducer 부분을 추가한다. player id는 하드코딩된게 4개가 있으므로 임의로 playerId 변수를 추가하고 하나씩 증가시키도록 한다.

AddPlayerForm에 addPlayer props를 주입한다.

changeScore 수정

score를 변경시키는 부분을 redux에 action을 dispatch하도록 수정한다. 먼저 actionTypes를 추가한다.

action creator에 changeScore 펑션을 추가한다. 기존처럼 id, delta를 파라메터로 받아들인다.

reducer에 해당 액션을 받아서 넘어온 메타데이터로 새로운 state를 생성하는 코드를 추가한다.

Counter 컴포넌트에 action을 dispatch한다.

기존에 추가된 props로 내려받는 코드를 삭제한다 먼저 App 컴포넌트에서 내려준 changeScore 속성을 제거하고, handleChangeScore 함수도 또한 제거한다. App 컴포넌트 다음에 받는 Player 컴포넌트의 changeScore 속성도 제거한다.