type필드(액션의 이름)
를 반드시 가지고 있어야 한다.
{
type: 'ADD_TODO',
data: {
id: 1,
text: '리덕스 배우기'
}
}
{
type: 'CHANGE_INPUT',
text: '안녕하세요'
}
변화를 일으켜야 할 때마다 액션 객체를 만들어야 하기 대문에 이를 함수로 만들어 관리.
function addTodo(data) {
return {
type: 'ADD_TODO',
data
};
}
// 화살표 함수로도 생성 가능
const changeInput = text => ({
type: 'CHANGE_INPUT',
text
});
변화를 일으키는 함수.
액션을 만들어 발생시키면, 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 온 후 두 값을 참고하여 새로운 상태를 만들어 반환.
const initialState = {
counter: 1
};
function reducer(state = initialState, action) {
switch(action.type) {
case INCREMENT:
return {
counter: state.counter + 1
};
default:
return state;
}
}
스토어
를 만든다.스토어
만 가질 수 있고, 스토어
는 현재 애플리케이션의 상태와 리듀서를 포함하며 그 외에도 몇 가지 중요한 내장 함수를 지닌다.스토어
의 내장 함수 중 하나이다.dispatch(action)
과 같은 형태로 action 객체를 파라미터로 넣어서 호출.dispatch
가 호출되면 스토어
가 reducer
함수를 실행시켜 새로운 상태를 만들어 준다.스토어
의 내장 함수 중 하나이다.
subscribe
함수 안에 리스너 함수
를 파라미터로 넣어서 호출해 주면, action이 dispatch되어 상태가 업데이트 될때마다 이 리스너 함수
가 호출된다.
const listener = () => {
console.log('상태가 업데이트 됨.');
};
const unsubscribe = store.subscribe(listener);
unsubscribe();