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 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!

    좋은 웹페이지 즐겨찾기