Redux의 개념잡기

리덕스에서는 ACTION(액션)이라는 것이 있는데 

상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킨다. 액션은 객체 형태로 표현이 되며,

만약 1을 더하는 액션을 정의할때는

{
	type : "ADD"
}

이런 식으로 액션을 정의할 수 있다. 

 

그리고 액션객체는 다른 값도 넣을 수 있다. (개발자 맘대로)

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

 

그리고 액션을 만들려면, 액션 생성 함수를 써야 하는데 

그냥 간단히  파라미터를 받아와서 액션 객체 형태로 만들어주는 역활을 한다. 

export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

 

왜 액션함수를 만드냐면 나중에 다른 컴포넌트에서 액션을 발생시킬 때 쉽게 사용하려고 만드는 것이다.

export키워드를 쓰면 다른 파일에서도 사용할 수 있다.

 

다음 REDUCER(리듀서)라는 것은 변화를 일으키는 함수이다. 이때 리듀서는 두 가지의 파라미터를 받게 되는데,

첫 번째는 state , 두 번째는 action을 받는다. 즉 전달받은 state를 action에 따라서 새로운 상태를 만들어서 반환한다.

 

간단히 카운터를 위한 리듀서를 제작해보면 

const counter = (state , action) => {
	switch(action.type){
    	case "ADD":
        	return state + 1;
        case "REMOVE":
        	return state - 1;
        default:
        	return state;
    }
}

 

여기서 useReducer를 작성해본 사람은 의문을 가질 것이다.

왜 default에 error가 아닌 state를 반환하는지. 리덕스에서는 보통 서브 리듀서를 만들고 나중에 루트 리듀서에 합치는 과정을 거치게 되기 때문이다.

 

그리고 STORE(스토어)

스토어에는 현재 앱 state , 리듀서 , 그리고 몇몇 내장 함수들이 있다.

 

그리고 DISPATCH(디스패치)는 스토어의 내장 함수인데, 액션을 발생시키는 함수이다.

dispatch(action) 이렇게 파라미터로 전달해주면 action이 발생되는 것이다.

action을 그렇게 호출을 하면 리듀서 함수를 실행시켜 그에 맞는 액션이 있는지 보고 상태를 변화시켜준다.

 

이렇게 크게 ACTION , REDUCER , STORE , DISPATCH 네 가지의 리덕스의 개념을 잡아봤다.