Redux
Redux 는 컴포넌트의 State를 Store라는 상태관리 전용 장소를 두어 관리한다. 어떤 컴포넌트에서 State가 변경되면 Reducer를 통해서 Store에 State에 변경 사항을 전달하게 된다. (props로 전달할 필요가 없다!)
실제로 React 사용자의 45% 정도가 react-redux를 사용하고 있다 .
(출처 : npmtrends )
리덕스에서 사용되는 키워드
1. 액션 (Action)
상태에 어떠한 변화가 필요할 때 액션이라는 것을 발생시킨다. 액션은 하나의 객체로 표현된다.
{
type : "INCREMENT"
}액션 객체는 type 값을 필수적으로 포함해야 한다. (그 외의 값들은 자유롭게 넣을 수 있다.)
{
type : "INCREMENT"
data : {
count: 1,
text : "증가"
}
}2. 액션 생성함수 (Action Creator)
액션 생성함수는 , 액션을 만드는 함수이다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.
//액션 형태의 객체를 return한다.
export function addTodo(data){
return {
type : "ADD_TODO",
data
};
}
//화살표 함수로도 만들 수 있다.
export const changeInput = text = >({
type: "CHANGE_INPUT",
text
});이런 액션 생성함수를 만들어서 사용하는 이유는 컴포넌트에서 쉽게 액션을 발생시키기 위함이다.
3. 리듀서 (Reducer)
리듀서는 앞에서 봤듯 변화를 일으키는 함수이다. 리듀서는 state , action 두가지의 인자를 받는다.
function reducer(state,action){
//상태 업데이트 로직
return alteredState;
}리듀서는 현재의 상태와 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환한다. 이 리듀서는 hooks 에서 useReducer를 사용할때 작성하는 리듀서와 같은 형태이다.
function counter(state ,action){
switch (action.type){
case "INCREASE":
return state +1;
case "DECREASE":
return state -1;
default :
return state;
}
}useReducer에선 일반적으로 default: 부분에 throw new Error("Unhandled Action') 과 같이 에어를 발생시키도록 처리하는게 일반적인 반면 리덕스의 리듀서에서는 기존state를 그대로 반환하도록 작성해야 한다.
4. 스토어 (Store)
리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 된다. 스토어 안에는 현재의 앱 상태 , 리듀서가 들어가 있고 추가적으로 몇가지 내장 함수들이 있다.
5. 디스패치 (Dispatch)
디스패치는 스토어의 내장 함수중 하나이다. 디스패치는 액션을 발생시키고 dispatch(action) 과 같은 방식으로 리듀서로 전달한다. 그리고 리듀서는 액션을 참고하여 새로운 상태를 생성한다.
6. 구독 (Subscribe)
구독 또한 스토어의 내장 함수중 하나이다. subscribe 함수는 함수 형태의 값을 파라미터로 받아와서 , 액션이 디스패치 될 때마다 전달받은 함수가 호출된다. react-redux에서는 connect함수 또는 useSelector hook 을 사용하여 스토어의 상태를 구독할 수 있다.
리덕스의 3가지 규칙
1. 하나의 애플리케이션 안에는 하나의 스토어가 존재한다.
여러개의 스토어의 생성 가능하기는 하나 권장되지 않는다.
2. 상태는 읽기 전용이다.
리액트에서는 state를 업데이트 해야 할 때 setState를 사용하고 , 객체를 업데이트 할 때도 spread 연산자(...) 를 사용하여 업데이트 한다. 리덕스에서도 마찬가지로 기존의 상태는 건들지 않고 새로운 상태를 생성하여 업데이트 해주는 방식으로 해주어야 한다.
리덕스에서 불변성을 유지해야 하는 이유는 데이터가 변경 되는 것을 감지하기 위해서 shallow equality를 사용하기 때문이다.
3. 리듀서는 순수한 함수여야 한다.
