Redux 툴킷이란 무엇입니까? 🔨

목차



Introduction
What's included inside Redux Toolkit?
RTK Query
What does RTK Query include?
Conclusion

소개

The Redux Toolkit package was developed to be the new standard way to write Redux code, handling three major concerns about Redux itself...

  1. "Configuring a Redux store is too complicated"
  2. "I have to add a lot of packages to get Redux to do anything useful"
  3. "Redux requires too much boilerplate code"
These concerns were taken from and can be read further upon in the Redux ToolKit Documentation .

제거해야 할 한 가지 중요한 점은 Redux가 강력한 데이터 가져오기 및 캐싱 기능을 제공한다는 것입니다. 이렇게 하면 동일한 논리를 수행하는 함수를 직접 만들 필요가 없습니다.

Redux를 사용할 때 Redux Toolkit을 사용할 필요는 없지만 개발 속도를 높이면서 코드를 건조하고 유지 관리하기 쉽게 만들기 때문에 권장됩니다. 이 패키지는 모든 기술 수준에서 사용할 수 있으며 처음, 중간 또는 끝에 추가할 수 있습니다. 나중에 Redux 툴킷 패키지를 사용할 계획이라면 작업을 더 쉽게 하기 위해 react/redux 애플리케이션을 redux 툴킷 패키지로 시작하는 것이 좋습니다.

Redux Toolkit에는 무엇이 포함되어 있습니까?

Redux Toolkit includes the following APIs... These APIs were created to supply logic and avoid repetition.

  • configureStore()
  • 간소화된 구성 옵션과 적절한 기본값을 제공하기 위해 createStore를 래핑합니다. 슬라이스 리듀서를 자동으로 결합하고, 제공하는 모든 Redux 미들웨어를 추가하고, 기본적으로 redux-thunk를 포함하고, Redux DevTools Extension을 사용할 수 있습니다.


  • createReducer()
  • switch 문을 작성하지 않고 대/소문자 감소 함수에 작업 유형의 조회 테이블을 제공할 수 있습니다. 또한 자동으로 immer 라이브러리를 사용하여 state.todos[3].completed = true
  • 와 같은 일반 변경 코드로 더 간단한 변경 불가능한 업데이트를 작성할 수 있습니다.


  • createAction()
  • 지정된 작업 유형 문자열에 대한 작업 생성자 함수를 생성합니다. 함수 자체에는 toString()이 정의되어 있으므로 형식 상수 대신 사용할 수 있습니다.


  • createSlice
  • 리듀서 함수의 개체, 슬라이스 이름 및 초기 상태 값을 수락하고 해당 작업 작성자 및 작업 유형으로 슬라이스 리듀서를 자동으로 생성합니다.


  • createAsyncThunk
  • 작업 유형 문자열과 약속을 반환하는 함수를 수락하고 해당 약속을 기반으로 보류 중/이행/거부된 작업 유형을 발송하는 썽크를 생성합니다.


  • createEntityAdapter
  • 상점에서 정규화된 데이터를 관리하기 위해 재사용 가능한 축소기 및 선택기 세트를 생성합니다.


  • createSelector
  • 사용 편의성을 위해 다시 내보낸 Reselect 라이브러리의 유틸리티입니다.


  • RTK 쿼리

    The RTK Query is given as an optional addition to the Redux toolkit package. It was built to ease the work load for programmers, solving the use case of data fetching and caching. The RTK Query is a compact and powerful toolset used to define an API interface layer for your app.

    The toolset is built on top of the Redux Toolkit, and uses Redux internally for its architecture. RTK query provides additional global store management capabilities. To further understand RTK query, it is recommended that you install the Redux DevTools browser extension. You can then examine and replay the behaviors of your requests and cache as they execute.

    RTK Query is already included with Redux Toolkit package. You can simply add the code:

    import { createApi } from '@reduxjs/toolkit/query'
    
    /* React-specific entry point that automatically generates
       hooks corresponding to the defined endpoints */
    import { createApi } from '@reduxjs/toolkit/query/react'
    
    

    RTK 쿼리에는 무엇이 포함되나요?

  • createApi()
  • RTK 쿼리 기능의 핵심입니다. 데이터를 가져오고 변환하는 방법에 대한 구성을 포함하여 일련의 끝점에서 데이터를 검색하는 방법을 설명하는 일련의 끝점을 정의할 수 있습니다. 대부분의 경우 "기본 URL당 하나의 API 슬라이스"를 원칙으로 하여 앱당 한 번 사용해야 합니다.


  • fetchBaseQuery()
  • 요청을 단순화하기 위한 가져오기 주변의 작은 래퍼입니다. 대부분의 사용자를 위해 createApi에서 사용할 권장 baseQuery로 사용됩니다.


  • ApiProvider
  • 아직 Redux 스토어가 없는 경우 공급자로 사용할 수 있습니다.


  • setupListeners()
  • refetchOnMount 및 refetchOnReconnect 동작을 활성화하는 데 사용되는 유틸리티입니다.


  • Redux Toolkit 설명서에서 RTK query에 대한 자세한 정보를 찾을 수 있습니다. 하지만 RTK 쿼리에서 빼야 할 중요한 점은...
  • 코드가 건조됩니다.
  • 논리를 다시 만들지 않아도 되므로 시간과 자원이 절약됩니다.
  • 보다 깨끗하고 효율적인 코드를 생성할 수 있습니다.

  • 결론

    Redux Toolkit comes with a lot of tools that save you lines of code, time, and headaches. But its purpose and benefits have raised controversy in the tech realm. For some user's, the package is very useful and fits all the points listed above. However, some find that it requires a lot of boilerplate code and just makes things more confusing. The only way to truly find out, is to use Redux Toolkit for yourself! There are many tutorials out there explaining how to create small or large applications utilizing the toolkit. It is unknown whether Redux Toolkit is just another fad of programming, or here to stay...but we might as use while it's hot!

    좋은 웹페이지 즐겨찾기