Redux-toolkit이 이란?

React로 쇼핑몰을 장바구니와 상품목록을 구현하는 과제를 하면서 store기능을해주는 라이브러리 Redux-toolkit을 사용해보았다 사용해보니 프로젝트가 간단해서그런건지 유용하게 쓸수있다는 생각이들어 정리해둬야겠다 생각했다.

 

출처 : https://redux-toolkit.js.org/introduction/getting-started#rtk-query​

Redux Toolkit이 뭐죠?

Redux에서 효율적인 Redux 개발을 위해 만들어진 Redux의 도구 모음이다. 

 

Redux Toolkit은 Redux 로직을 작성하기 위한 표준 방식이 되도록 만들어졌고, Redux에서 사용하기를 강력히 추천하는 라이브러리다!

작성자는 Redux는 사용해보지않았지만 사용하기위해 설정하기가 어렵다고 알고있었지만 Redux-Toolkit튜토리얼을 보고 사용해본 입장에선 Toolkit은 사용하기 정말 간단하다! Redux에서 괜찮은 라이브러리를 만들었다고 생각이들었다. 

 

Redux Toolkit의 목적

" 이를 통해 저장소 준비나 상태 보관, 리듀서 작성과 같은 모든 것들을 여러분이 결정하게 했습니다. 이렇게 융통성을 주는 것은 어떤 경우에는 좋지만, 항상 필요한 것은 아닙니다. "  

 Redux-Toolkit에 있는 설명이다. 사용하기엔 편해졌지만 큰 프로젝트에선 직접 리듀서를 작성해야하는일 등등.. 으로 비슷한코드를 계속 작성해야되서 불편함을 느낄수도있는거같다. 

 

Redux-toolkIt패키지는 Redux 논리를 작성하는 표준 방법입니다. 원래 Redux에 대한 세 가지 일반적인 문제를 해결하기 위해 만들어 졌습니다.

• "Redux 스토어 구성이 너무 복잡합니다."
• "Redux가 유용한 작업을 수행하려면 많은 패키지를 추가해야 합니다."
• "Redux에는 너무 많은 상용구 코드가 필요합니다"

" 모든 경우를 해결할 수야 없지만, create-react-app와 apollo-boost처럼 대부분의 경우를 다뤄주고 내려야 하는 결정을 줄여주는 공식 도구를 제공하기로 했습니다."

 Redux-Toolkit 구조 설명이 잘 되어있다고 느꼈다 처음 프로젝트 생성시에 셋팅을해둔다면 복잡할일이 없을거같다.

 

왜 Redux Toolkit을 사용해야 하나요?

Redux Toolkit 장점​

- Redux에서 제공하는 동작 방식제안(모범 방식)

- 간단하게 코드를 작성하게 해준다 => Redux 앱을 쉽고 빠르게 개발할 수 있게한다.

- Redux-toolkit사용하면 Redux사용에 도움을 준다

- Redux에서 강력추천하는 Redux Toolkit => 자부심이 느껴지는 라이브러리... 문제점이 있다면 보안을 잘 해줄거같은 느낌이 든다..

 

Redux Toolkit은 저희가 추천하는 모범 사례를 통해 기본 동작을 제공하고, 실수를 줄여주고, 더 간단한 코드를 작성하게 해 줍니다. 이를 통해 좋은 Redux 앱을 쉽고 빠르게 개발할 수 있게 해 줍니다. 경험이나 기술 수준과 상관 없이 Redux Toolkit은 모든 Redux 사용자에게 도움이 됩니다. 새 프로젝트를 시작할 때 함께해도 되고, 기존 프로젝트를 점차 옮겨가도 됩니다.

물론 여러분이 Redux를 사용하기 위해 Redux Toolkit이 필수적인 것은 아닙니다. 다른 Redux를 감싸주는 라이브러리를 사용했거나, 모든 로직을 "손수" 작성한 앱들도 많이 있지요. 다른 방식으로 하고 싶으면 하세요!

하지만, 저희는 모든 Redux 앱에 Redux Toolkit을 사용하기를 강력히 권장합니다.

결론적으로 여러분이 새 프로젝트에 Redux를 처음 사용하려는 사용자이든, 기존 앱을 더 간단하게 만드려는 경험자이든, Redux Toolkit 사용은 여러분의 코드를 더 좋고 유지보수하기 쉽게 만들어줍니다.

 

 

포함된 것들​

Redux Toolkit에 포함된 것들은:

• configureStore(): createStore를 감싸서 쓸만한 기본값들과 단순화된 설정을 제공합니다. 여러분의 리듀서 조각들을 자동으로 합쳐주고, 기본 제공되는 redux-thunk를 포함해서 여러분이 지정한 미들웨어들을 더해주고, Redux DevTools 확장을 사용할 수 있게 합니다.
• createReducer(): switch 문을 작성하는 대신, 액션 타입과 리듀서 함수를 연결해주는 목록을 작성하도록 합니다. 여기에 더해 immer 라이브러리를 자동으로 사용해서, state.todos[3].completed = true와 같은 변이 코드를 통해 간편하게 불변 업데이트를 할 수 있도록 합니다. 
• createAction(): 주어진 액션 타입 문자열을 이용해 액션 생산자 함수를 만들어줍니다. 함수 자체에 toString() 정의가 포함되어 있어서, 타입 상수가 필요한 곳에 사용할 수 있습니다.
• createSlice(): 조각 이름과 상태 초기값, 리듀서 함수들로 이루어진 객체를 받아 그에 맞는 액션 생산자와 액션 타입을 포함하는 리듀서 조각을 자동으로 만들어줍니다.
• createAsyncThunk: 액션 타입 문자열과 프로미스를 반환하는 함수를 받아, pending/fulfilled/rejected 액션 타입을 디스패치해주는 thunk를 생성해줍니다.
• createEntityAdapter: 저장소 내에 정규화된 데이터를 다루기 위한 리듀서와 셀렉터를 만들어줍니다.
• createSelector 유틸리티를 Reselect 라이브러리에서 다시 익스포트해서 쓰기 쉽게 해줍니다.

 

 

 

참고 블로그 : https://velog.io/@sweet_pumpkin/%EB%AC%B4%EC%9E%91%EC%A0%95%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-%EC%B5%9C%EA%B3%A0-%EB%A6%AC%EB%8D%95%EC%8A%A4%EC%95%BC-%EA%B3%A0%EB%A7%99%EB%8B%A4-Redux-Redux-Toolkit-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

 

위의 그림은 기존 상태 관리 방식을 시각화한 것이다. 위 그림처럼 상태 변경이 한 번 일어났을 뿐인데 해당 데이터를 변경하기 위해 또 다른 상태 변경이 여러 번 일어나고 있다. 이러한 구조는 오류를 야기할 수 있으며, 발생한 오류를 잡아내기도 쉽지 않다.

위 그림으 Redux를 사용했을때 흐름이다. 리덕스는 Reducer와 Store를 통해 상태 변경 과정을 간소화하여 기존의 문제를 해결했다. 이것은 복잡한 상태 관리를 매우 효율적이고 간편하게 변경하여 오류 발생률을 낮추게 한다.

 

Redux 기본 용어

리덕스의 기본 용어에 대해서 알아보자.

 

Action

스토어의 상태를 변경하기 위해서는, 액션을 생성해야한다. 액션은 객체이며, 반드시 type을 가져야 한다. 액션 객체는 액션생성함수에 의해서 만들어진다.

Reducer

리듀서는 현재 상태와 액션 객체를 받아 새로운 상태를 리턴하는 함수다.

Dispatch

디스패치는 스토어의 내장 함수 중 하나이며, 액션 객체를 넘겨줘 상태를 업데이트 시켜주는 역할을 한다.

Subscribe

스토어의 내장 함수 중 하나로, 리듀서가 호출될 때 서브스크라이브된 함수 및 객체를 호출한다.

아래의 그림으로 위의 용어들을 이해해보자.

1. UI가 처음 렌더링될 때, UI 컴포넌트는 리덕스 스토어의 상태에 접근하여 해당 상태를 렌더링한다.
2. 이후 UI에서 상태가 변경되면, 앱은 디스패치를 실행해 액션을 일으킨다.
3. 새로운 액션을 받은 스토어는 리듀서를 실행하고 리듀서를 통해 나온 값을 새로운 상태로 저장한다.
4. 서브스크라이브된 UI은 상태 업데이트로 변경된 데이터를 새롭게 렌더링한다.