리듀서 만들기. 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 파일을 만들어줍니다.

이런 식으로 명명하면, 해당 파일 타입을 알 수있고 무척 찾기 쉽겠죠?

제 개인적인 견해입니다...

// src/reducers/reducer_books.js

export default function() {

return [

{title: 'Load of the ring'},

{title: 'Harry Potter'},

{title: 'The Old Man and the Sea'},

{title: 'Demian'}

]

};

이는 함수이고 책 리스트의 어플리케이션 state를 반환하죠.

이제 이 리듀서는 우리 프로젝트 어느 곳에든 사용 가능해야하므로,

이를 내보내기 해야합니다.

이 만든 리듀서는 두개의 스텝 프로세스가 있습니다.

첫번째 스텝은 리듀서를 만드는 것이고,

두번째 스텝은 앱과 연결 시키는 겁니다.

이제 반정도 남은거죠.

리듀서 컴파인하기

같은 reducers 폴더의 index.js 파일을 열면

// src/reducers/index.js

import { combineReducers } from 'redux';

import BooksReducer from './reducer_books';

const rootReducer = combineReducers({

books: BooksReducer

});

export default rootReducer;

여기에 combineReducers라 불리느 함수가 있습니다.

이는 스테이트를 맵핑합니다.

즉 books와 books의 리듀서인 값을 가지는 것이죠.

리듀서를 생성하고 combine하는 것까지 알아봤습니다.

그런데 어떻게 이를 테스트하고 이것이 올바른 경로인지 알수 있을까요?