Redux Toolkit이란?

 

 

Redux Toolkit의 등장 배경

Redux가 처음 등장했을 때 많은 사람들은 우리의 애플리케이션의 모든 상태 관리 문제가 해결될 것이라고 기대했었다. 하지만 많은 개발자들이 Redux 사용에 대해 몇 가지 불편함을 느꼈다.

사용했을 때 불편했던 이유는 Redux 스토어를 구성하는 것은 너무 복잡하며, Redux를 더 유용하게 쓸려면 많은 패키지들을 추가해야 하며, 불필요한 상용구 코드량이 많다는 것이다.  

이러한 Redux의 한계를 깨닫고 "효율적인 Redux 개발을위한 공식적이고 독단적인 배터리 포함 도구 세트" Redux Toolkit (RTK)가 개발되었다.

 

그렇다면 Redux Toolkit를 어떻게 사용하는가?

설치 방법

 

createAction

createAction은 액션 생성자 함수를 반환한다. 여기서 주목해야 할 중요한 변경 사항 중 하나는 객체가 아닌 액션 생성기 함수를 반환한다는 것이다.

이렇게 addToDo, deleteToDo라는 2가지 action 함수들이 존재한다.

const ADD = "ADD";
const DELETE = "DELETE";

const addToDo = (text) => {
	return {
    	type: ADD,
        text,
    };
};

const deleteToDo = (id) => {
	return {
    	type: DELETE,
        id: parseInt(id),
    };
}

만약, createAction을 이용해서 위의 코드를 바꾼다면,

// action은 함수인 createAction으로 만들어지기 때문에,
//console.log(action)으로 보면 type과 payload를 확인할 수 있다.

const addToDo = createAction("ADD");
const deleteToDo = createAction("DELETE);

이렇게 더 짧은 코드로 효율적으로 바꿀 수 있다.

 

createReducer

createReducer는 첫번째 인자로 initalState(초기값) 사용하고, 액션 생성자 함수를 사용하고 객체 키를 가져와서 액션 생성자와 비교하고 reducer와 일치하는 방법을 사용한다.

기존 reducer 코드

// 기존 Reducer
const reducer = (state = [], action) => {
	switch (action.type) {
    	case addToDo.type:
        	return [{ text: action.payload, id: Date.now() }, ...state];
        case deleteToDo.type:
        	return state.filter((toDo) => toDo.id !== action.payload);
        default:
        	return state;
    }
};

createReducer를 적용시킨 코드

// createReducer를 적용시킨 코드
const reducer = createReducer([], {
	[addToDo]: (state, action) => {
    	state.push({ text: action.payload, id: Date.now() });
    },
    [deleteToDo]: (state, action) => {
    state.filter((toDo) => toDo.id !== action.payload),
})

이렇게 createReducer를 적용시키면 switch, case를 사용할 필요를 없게 해 준다.

 

createSlice

createSlice는 작업 생성자 및 작업 유형을 생성하는 옵션을 제공한다. 즉, action과 reducer를 합쳐서 선언을 하게 해 준다는 뜻이다.

createSlice안에 들어가는 항목으로는 reducer 함수, 초기 상태 값, 슬라이스 이름만 지정하면 된다.

위에 선언한 acrion과 reducer를 createSlice를 이용해서 합치면, 

const toDos = createSlice({
	name: "toDosRedicer",
    initialState: [],
    reducers: {
    	add: (state, action) => {
        	state.push({ text: action.payload, id: Date.now() });
        },
        remove: (state, action) =>
        	state.filter((toDo) => toDo.id !== action.payload),
    },
});

이렇게 간략하게 상용구 코드량을 줄이면서, 두 기능을 사용할 수 있게 된다.

 

configureStore

configureStore은 reducer를 결합하고, 제공하는 redux 미들웨어를 추가하고, 기본적으로 redux-thunk 개발 단계에 유용한 미들웨어를 가져오고, 액션 생성자와 액션 유형을 생성 한 다음 복잡한 구성없이 DevTools를 활성화시킨다.

const store = configureStore({ reducer: toDos.reducer });

 

Redux DevTools 설정

RTK를 사용하면 Redux DevTools가 기본적으로 지원되며 간단한 플래그 true 또는 false로 redux devtools를 활성화 또는 비활성화하여 애플리케이션에서 디버깅 상태를 쉽게 확인할 수 있습니다. 

Redux DevTools은 configureStore기능에서 활성화된다.

Redux DevTools은 크롭 앱 스토어에서 다운로드 받아 사용한다.

 

🎈 결론!

이처럼 redux-toolkit에 있는 createAction, createReducer, createSlice, configureStore 가지고 Redux를 사용하면 코드량이 월등히 적어지기 때문에 더욱 효율적으로 상태들을 관리할 수 있게 된다.