[노마드코더] Redux 101 - 첫번째

[참고]노마드코더(https://nomadcoders.co)

노마드 코더 Nomad Coders

 

Redux 사용을 위해

yarn add redux

또는

npm install redux

반응형

1. Add, Minus 버튼으로 카운트 바꾸기

Vanila JS	Redux
let count 변수를 선언해 값을 저장	store에 데이터를 저장
직접 만든 event handler 함수내에서 count 변수를 변화	store 생성 시 지정한 reducer 함수를 dispatch()함수 호출을 이용해 호출하면서 state를 변화
listener가 호출될 때 HTML을 업데이트하는 함수를 직접 호출	store.subscribe를 이용해 데이터가 바뀔 때 HTML 업데이트 처리

import {createStore} from "redux"

 

- createStore(reducer 함수) : 데이터를 저장하는 store 생성

- reducer 함수(사용자 정의) : store에 저장된 데이터를 처리할 수 있는 함수, param으로 현재 데이터의 state와 dispatch 함수가 보내는 action을 받을 수 있다. reducer의 return 값으로 데이터의 state가 바뀐다.

- store.dispatch(action) : 데이터를 변화시키기 위해 reducer에게 state를 보내는 통신 방법. param으로 object 형태(무조건)로 action을 전달할 수 있다. => 무조건 Object 형태, key값은 무조건 "type"

- store.subscribe(FUNCTION) : 말그대로 "구독", store를 listen하면서 store에 저장되어 있는 데이터에 변화가 생기면 자동으로 호출.

 

정리 : store를 이용해 데이터를 저장 => reducer 함수에서 return하는 값이 현재 데이터 state가 된다 => reducer함수를 호출하여 state를  업데이트하기 위해서 store.dispatch() 호출 => 데이터의 state가 업데이트 되었을 때 호출되는 함수는 store.subscribe()를 사용하여 지정

 

BONUS (REFACTORING)

• reducer 함수의 if - else => switch로 변경
• action.type이 string => 상수로 선언

[전체 코드] index.js