Day of Nomad

리듀서 만들기. Create a reducer. 본문

Develop/React

리듀서 만들기. Create a reducer.

DeveloperYong 2018. 6. 25. 22:05

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하는 것까지 알아봤습니다.


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



Comments