Skip to main content

리덕스 기본 총정리

액션 (Action)#

  • 싱글 오브젝트 형태의 자바스크립트 객체
  • type 프로퍼티 필수
  • 그 외의 필드는 자유로이 커스터마이징
{
type: 'HELLO',
id: 45
}

액션 생성함수 (Action creator)#

  • 액션을 리턴해주는 함수
function toHello(personID){
return {
type: 'Hello'
id: personID
}
}

디스패치(dispatch)와 바운드 액션 생성함수(bound action creator)#

...
dispatch(toHello(p))
// 나중에 boundToHello 만 콜하면 됨.
const boundToHello = (p) => dispatch(toHello(p))

리듀서 (Reducer)#

  • 스토어에 전송된 응답으로 state를 변경
  • 순수 함수(pure function)
  • 상태와 액션을 참고 => 새 상태 반환
  • shallow copy 하여 새로운 상태 객체를 변환해줄 것
function reducer(state, action){
// 상태 업데이트
return changedState;
}

상태 (State)#

  • 사용자가 지정
  • 리듀서의 첫번째 인자
[
{
id: 14,
isGreeted: false
}
]

액션 핸들링#

const initialState = {
people:[]
}
function helloApp(state = initialState, action) {
switch (action.type) {
case 'Hello':
return Object.assign({}, state, {
people: state.people.map((person, id) => {
if (id === action.id) {
return Object.assign({}, person, {
completed: !person.completed
})
}
return person
})
})
default:
return state
}
}

컴포지션 패턴#

  • 기능 나누기
function people(state=[], action){
switch (action.type) {
case 'Hello':
return state.map((person, id) => {
if (id === action.id) {
return {
...person, completed: !person.completed
}
}
return person
})
})
default:
return state
}
}
function helloApp(state={}, action){
switch (action.type) {
case 'Hello': return people(state.people, action)
}
}
  • 리덕스 모듈 내 combineReducers()
import {combineReducers} from 'redux'
...
function helloApp = combineReducers({ people });

스토어(Store)#

  • 액션과 리스너를 저장하는 곳
  • getState() 로 접근
  • dispatch(action) 으로 업데이트

구독(Subscribe)#

  • 리스너 등록
  • 반환하는 함수는 리스너 등록해제에 쓰임