vanilla redux 2

전 포스팅에 이어 오늘은 redux를 이용해 todo리스트를 만들어보자.

 

그에 앞서 redux의 중요한 세가지 룰을 알아보자

 

먼저 Single Source of Truth

Redux는 앱의 state를 위해 단 하나의 store를 이용한다.

모든 state가 한곳에 있기 때문에 이렇게 부른다. store의 데이터 구조는 nested된 구조로 이루어져 있다.

자바스크립트 객체로써  {{{{},{},{}},{}}} 이렇게 정리되어 있다.

 

두번째로 state는 read-only이다.

절대로 직접 mutate하면 안된다.  state를 변경하기 위해서는 action을 통해 dispatch되어야 한다.

이말인 즉슨 예를 들어 state가 배열이라면 새로운 값이 들어올때 기존 배열을 push같은 메서드를 이용해 변경해주는 것이 아닌

새로운 배열을 만들어서 리턴해줘야 한다는 것이다.

 

세번째 Changes are made with Pure Functions

두번째에서 봤듯이 redux에서는 앱에서 직접 state를 변경하면 안된다. 그대신 action을 dispatch하여 state를 변경한다.

이 과정에서 받아온 action객체를 처리하는 함수를 reducer라고 하는데 action이 어떤 변화를 알려주는 객체라면

reducer는 그 정보를 통해 앱의 상태를 어떻게 바꿀지 정의한다고 볼 수 있다.

그럼 Pure function이란 무엇인가.

- 외부 네트워크 혹은 데이터베이스에 접근하면 안된다.

- return value는 오직 parameter값에만 의존되어야 한다.

- 인수는 변경되지 않아야 한다.

- 같은 인수로 실행된 함수는 언제나 같은 결과를 반환해야 한다.

- 순수하지 않은 API호출을 하지 말아야 한다.(Date or Math)등.

 

자 그럼 이제 다시 redux를 사용해서 todoList를 만들어보자.

이해에 초점을 두자. 먼저 상단에 두 상수는 type을 전달하기 위한 상수이다.

그리고 그 아래 function두개는 action으로 보낼 object를 함수를 만들어 리턴해준다. (추가와 삭제)

그리고 역시 reducer를 만들어주는데 이때 파라미터는 state라는 배열과 , action을 전달한다.

switch case구문으로 action의 타입에따라

 

add 인 case이면 text, id를 전달해준다. (date.now는 그냥 개별 아이디를 주기 위해 date 를이용했다) 그리고 spread로 이전 state를 넣어준다. 역시 mutate하지 않았다. 새로운 배열을 리턴해주었다.

del인 case이면 delete버튼을 클릭한 해당 엘레멘트의 id를 action에 전달해주는데 이때 기존 배열에서 제거하는 splice 메서드 대신에

배열에서 주어진 조건이 true인 값만 새로운 배열로 리턴하는 filter를 사용한다. 역시 mutate하지 않기 위해서이다.

 

그리고 createStore해준다. 해당 스토어의 문지기역할을 할 reducer를 꼭 넣어주자.

그 아래 코드는 그냥 state의 변화 상태를 보기 위해 콘솔에 찍는 코드이다.

자 그리고 세개의 function이 있다. 위 두개는 dispatch를 통해 reducer에 action을 전달하는 함수이다.

액션함수는 상단에 만들었으니 전달만 하면된다.  delete의 경우 타겟의 id를 전달해주는데 이때 id가 string이기 때문에 parseInt로 변환해서 넣어준다.

그리고 실제 브라우저에 그려줄 함수는 먼저 getState를 통해 state를 받아온다.  해당 state를 넣은 배열의 요소들을 각각

html elem을 만들어서 state의 text를 innerText해주고 각각 ul에 append해준다.

이때 delete button을 만드는데 위에서 만든 delete를 해줄 액션을 전달해주는 function을 callback으로 넣어준다.

 

그리고 subscribe메서드를 통해 이 paintTodos를 실행해준다. subscribe는 말그대로 구독이다. store를 구독하고 있는 것이다.

파라미터로 listener함수를 넣어준다. subscribe는 store안의 변화를 우리에게 알려준다.subscribe를 이용해 state가 바뀌는 시점을 캐치해서 그순간 listener함수를 실행해 원하는 결과를 도출하면된다.

 

그리고 form에 submit이 이루어지는 동작이다. 역시 submit이 이루어지면 해당 value를 todo에 담고

dispatch add 함수에 todo를 전달해서 reducer에 action을 전달해주면 된다.