Payload에 대해서 이해하고 활용
카운터 프로그램을 사용하는 사용자가 직접 더하고 뺄 숫자를 정할 수 있게 하려한다 => 이제 “N을 더해” 라고 N을 같이 리듀서에서 보내야 한다. 지금까지는 ~을 이라는 목적어가 없었다면, 이제는 그 목적어가 생긴것이고 목적어도 액션객체에 담아 같이 보내줌 = Payload
모듈 작성
// src/redux/modules/counter.js
// Action Value
// Action Creator
// Initial State
// Reducer
// export default reducer
패턴화
Reudx를 사용하기 위해서는 우리가 redux의 구성 요소를 모두 만들어야만 사용이 가능하다. 만약에 redux 모듈을 개발하는 개발자 마다 구성요소들을 재각각 구현하면 어떨까? => 그리고 그 개발자들과 협엽을 해야하는 상황에 놓여 있을 때 수많은 파일 중에 내가 필요로 하는 구성요소를 찾는것이 어려워진다. => Erik Rasmussen 이라는 개발자가 이것을 패턴화 하여 작성하는 것을 제안 => Ducks pattern
-
Reducer 함수를
export default한다. -
Action creator 함수들을
export한다. -
Action type은
app/reducer/ACTION_TYPE형태로 작성한다.
(외부 라이브러리로서 사용될 경우 또는 외부 라이브러리가 필요로 할 경우에는 UPPER_SNAKE_CASE 로만 작성해도 괜찮다.)
정리
- 리듀서로 보내는 액션객체에 어떤 정보를 같이 담아보내고자 한다면 payload를 이용한다.
payload는 Action Creator를 생성할 때 매개변수에 자리에서 받을 준비를 하고, 반환하는 액션객체에 payload라는 key와 받은 매개변수를 value로 하여 구현한다.- 리듀서에서 payload를 사용하고자 할 때는 action.payload로 사용할 수 있다.
- ES6에서 객체를 생성할 때 key와 value가 같으면 축약해서 작성할 수 있다.
Ducks패턴은Erik Rasmussen이 제안했고, 현재 리덕스 모듈 작성방법의 정석으로 여겨지고 있다.
마이너스 구현
구현하는 순서 파악
일단 counter.js로 넘어가서 module
1. action value 추가
2. action creator 추가
3. 마지막으로 reducer의 case추가
4. app.js로 넘어옴
5. dispatch 선언은 이미해둠
5. 빼기 button을 눌렀을때 실행할 이벤트 핸들러를 만들어 준다.
6. 빼기 button에 이벤트 핸들러 연결
7. action creator import 해준다.
8. 마지막으로 빼기 핸들러의 dispatch 부분 추가
다른사람들의 component와 redux코드 확인하면서 공유
