리덕스에서 사용되는 키워드들

박슬빈·2022년 1월 18일
0

리덕스

목록 보기
1/1

리덕스에 사용되는 키워드

액션 (Action)

상태에 변화가 필요할 때 액션이라는 것을 발생 시킴
이것은 하나의 객체로 표현됨
액션 객체는 다음 형식으로 이루어짐

{
	type : "TOGGLE_VALUE"
}

type필드는 필수로 있어야한다.
그외의 값은 개발자 마음대로..

{
	type : "CHG_INPUT"
	data: {
    	id:0,
        text:"텍스트"
    }
}

액션 생성함수 (Action Creator)

액션 생성함수는 액션을 만드는 함수
파라미터를 받아와서 액션 객체 형태로 만들어준다

export function add(data){
 	return{
   	type:"ADD",
      data
    } ;
}
// arrow function 으로도 가능함
export const chginp= text =>({
  type:"CHG_INP",
  text
});

액션 생성함수를 만드는 이유 ?
나중에 컴포넌트에서 더 쉽게 액션을 발생시키기 위함
그래서 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용함

리듀서 (Reducer)

리듀서는 변화를 일으키는 함수이다.
두가지의 파라미터를 받아온다.

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)를 만들 수 있다.
루트 리듀서 안의 작은 리듀서는 서브 리듀서라고 부른다.

스토어 (Store)

리덕스는 한 어플리케이션당 하나의 스토어를 만든다.
스토어 안에는 현재 앱 상태 , 리듀서 , 추가적인 내장 함수들이 있다.

디스패치 (dispatch)

디스패치는 스토어의 내장 함수 중 하나
액션을 발생 시키는 것 이라고 이해.
dispatch에는 action을 파라미터로 전달한다.

profile
이것저것합니다

0개의 댓글