redux를 사용하여 버튼 클릭시 숫자가 +,- 되는 앱 만들기

redux를 사용하여 화면에 숫자가 +,-되도록 하는 앱을 다시 만들어 봤다.

그때는 이해하고 넘어 갔는데, 다시 해보니까 리셋이 되었다.

기록하면서 한번 더 이해해 보자 !

 

공식 홈페이지를 참고하면 좋지만 redux를 못찾겠다,,,

 

 

configStore.js

기본 세팅으로 rootReducer를 store에 저장하고, 다른 곳에서 사용할 수 있게 export 해준다.

createStore에 줄이 그어진 이유는 redux/toolkit 사용을 권장 해서 그런것 같다.

 

index.js

app.js를 Provider로 감싸 주고, store를 받아 오면서 useState로 관리하던 것을 store란 저장소(?) 에서 관리한다.

 

app.js

counter.js

store에 저장된 정보를 화면에 보여주기(렌더링) 위해선 useSelector로 해당 리듀서를 가져오고,<div>{number}</div>로 보여준다.

해당 리듀서에 값을 보낼때는 disPatch를 사용하는데 type과 payload의 값을 담아서 보낼 수 있다.(버튼 클릭시)

payload로 받은 1을 action.payload에 담아서 플러스 버튼을 클릭하면 1을 더해주고, 마이너스 버튼을 클릭하면 1을 빼준다.

출처 : https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts/

app.js(view)

-버튼 클릭시 type과payload를 담아서 store안에 있는 reducer(counter)에 보낸다.(dispatch안에 담아서 보냄)

-store에 있는 정보를 useSelector를 사용해서 가져온다.

-가져온 정보를 화면에 출력한다.

 

흠,,, 공식문서 보는게 빠를지도 모르겠다 !