리덕스 기본 총정리

액션 (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)#

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