상태에 변화가 필요할 때 액션이라는 것을 발생 시킴
이것은 하나의 객체로 표현됨
액션 객체는 다음 형식으로 이루어짐
{
type : "TOGGLE_VALUE"
}
type필드는 필수로 있어야한다.
그외의 값은 개발자 마음대로..
{
type : "CHG_INPUT"
data: {
id:0,
text:"텍스트"
}
}
액션 생성함수는 액션을 만드는 함수
파라미터를 받아와서 액션 객체 형태로 만들어준다
export function add(data){
return{
type:"ADD",
data
} ;
}
// arrow function 으로도 가능함
export const chginp= text =>({
type:"CHG_INP",
text
});
액션 생성함수를 만드는 이유 ?
나중에 컴포넌트에서 더 쉽게 액션을 발생시키기 위함
그래서 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용함
리듀서는 변화를 일으키는 함수이다.
두가지의 파라미터를 받아온다.
function reducer(state,action){
// 여기에 업데이트 로직은 만든다.
return alterState;
}
function counter(state, action) {
switch (action.type) {
case 'INCREASE':
return state + 1;
case 'DECREASE':
return state - 1;
default:
return state;
}
}
// 위와 같이 리듀서를 작성해준다.
리덕스를 사용 할 때에는 보통 여러개를 만들고 이것들을 합쳐서
루트 리듀서 (Root Reducer)를 만들 수 있다.
루트 리듀서 안의 작은 리듀서는 서브 리듀서라고 부른다.
리덕스는 한 어플리케이션당 하나의 스토어를 만든다.
스토어 안에는 현재 앱 상태 , 리듀서 , 추가적인 내장 함수들이 있다.
디스패치는 스토어의 내장 함수 중 하나
액션을 발생 시키는 것 이라고 이해.
dispatch에는 action을 파라미터로 전달한다.