일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- react-native
- History
- native app
- 담배
- Container
- 웹팩
- 리액트
- Presenter
- redux
- reducer
- 일본
- react
- Props
- 한국사
- 역사
- 식민사관
- 리액트디자인패턴
- webpack
- Korea
- 리액트 네이티브
- 리덕스
- Tabacco
- state
- design passtern
- 역사왜곡
- Today
- Total
Day of Nomad
리듀서 만들기. Create a reducer. 본문
reducer란 무엇인가?
간단히 말하면, 리듀서는 어플리케이션 state를 반환하는 함수입니다.
왜냐하면, 어플리케이션은 많은 다른 스테이트를 가지고 있고 많은 리듀서를 가집니다.
이 어플리케이션 state는 책 목록과 현재 선택한 책 두개를 가지고 있습니다.
즉, 두개의 리듀서를 가지고 있는데요. 하나는 책 리스트를 만드는 것을 담당하고,
다른 하나는 현재 선택한 책을 만드는 것을 담당합니다.
다시 강조하면, 이 어플리케이션 state는 평번한 자바스크립트 객체 입니다.
약간 다른 다이어그램을 봅니다.
여기 어플리케이션 스테이트는 큰 오브젝트로 대변되며, 두개의 키를 가지고 있습니다.
두개의 스테이트는 books와 activeBook이죠.
이 books 스테이트는 book 리듀서에 의해 만들어지구요.
active book 또한 마찬가지의 리듀서에 의해 만들어 집니다.
즉, 리듀서는 state의 값을 만듭니다.
키들은 원하는 무엇이든지 될 수 있는데요.
books 대신에 bookslist나 library books 같은거로 말이죠.
리듀서가 고려해야할 것은 이 스테이트의 값이죠.
일반적으로 이는 1:1 페어링을 가집니다.
스테이트의 키나 스테이트의 값은 book's reducer에 의해 생산됩니다.
직접 books reducer를 작성해 보겠습니다.
스테이트의 값을 만들기 위한 함수를 작성할 것인데요.
이는 단지 오브젝트 배열을 만듭니다. 각 오브젝트는 책 제목이구요.
리듀서의 값은 스테이트의 책 키에 할당됩니다.
reducer 만들기
reducers 폴더안에 reducer_books.js 파일을 만들어줍니다.
이런 식으로 명명하면, 해당 파일 타입을 알 수있고 무척 찾기 쉽겠죠?
제 개인적인 견해입니다...
이는 함수이고 책 리스트의 어플리케이션 state를 반환하죠.
이제 이 리듀서는 우리 프로젝트 어느 곳에든 사용 가능해야하므로,
이를 내보내기 해야합니다.
이 만든 리듀서는 두개의 스텝 프로세스가 있습니다.
첫번째 스텝은 리듀서를 만드는 것이고,
두번째 스텝은 앱과 연결 시키는 겁니다.
이제 반정도 남은거죠.
리듀서 컴파인하기
같은 reducers 폴더의 index.js 파일을 열면
여기에 combineReducers라 불리느 함수가 있습니다.
이는 스테이트를 맵핑합니다.
즉 books와 books의 리듀서인 값을 가지는 것이죠.
리듀서를 생성하고 combine하는 것까지 알아봤습니다.
그런데 어떻게 이를 테스트하고 이것이 올바른 경로인지 알수 있을까요?
'Develop > React' 카테고리의 다른 글
리액트 디자인 패턴 React Design Pattern (2) | 2018.07.01 |
---|---|
컨테이너 구현하기 Building container (0) | 2018.06.26 |
컨테이너 컴포넌트 Container (0) | 2018.06.26 |
리덕스는 왜 필요할까? Why do we need Redux? (1) | 2018.06.25 |