dispatch, getState : redux store의 action을 dispatch하거나 state를 getState할 수 있다.
extra: thunk.extraArguments와 유사
thunk.withExtraArgument = createThunkMiddleware;
extraOptions: endpoint에서 extraOptions으로 넘겨준 값
endpoints : 서버에 대응해서 작동하는 operation 집합
extractRehydrationInfo : RTK Query는 Next.js에서 next-redux-wrapper를 통해 SSR을 제공하는데 이때 api요청과 함께 hydration을 도와준다.
tagTypes: endpoint별로 caching과 invalidation의 기준이 되는 string array
reducerPath: store에 저장할때 api별로 구분하기위한 unique key
serializeQueryArgs: 여러 이유로 캐 custom function
keepUnusedDataFor: default는 60초 이다. 설정 시간동안 api query에 대해 subscriber가 없으면 refetch 되게 만든다.
refetchOnMountOrArgChange : refetch 발동조건을 api query subscriber마다 줄지 결정한다. 시간 제한을 줄 수 도 있다.
false(default) : 기본적으로는 항상 cache된 데이터를 반환한다. keepUnusedDataFor 시간만큼 api query에 subscriber가 없어야만 이후 api 요청에대해 refetch가 이뤄진다.
true: 새로운 subscriber가 query에 추가될 때마다 refetch가 이뤄진다.
number: 마지막 api fulfill시간과 현재시간을 비교해서 넘었으면 refetch한다. 여기서 fullfill은 cache된 데이터를 가져오는 것은 해당하지 않는다.
refetchOnFocus: default: false. true이면 application window가 focus되면 refetch 발동조건 성립
refetchOnReconnect : default false. true이면 network연결이 다시 되면 refetch 발동조건 성립
endpoint
query
queryFn(arg,{ signal, dispatch, getState }, extraOptions, baseQuery) : query, Mutation을 대체할 수 있다. query(Mutation)을 Customize할때 활용. createApi.baseQuery, transFormResponse를 거치지 않는다.
arg: query요청 시 매개변수
signal, dispatch, getState : createApi.baseQuery의 매개변수와 동일
extraOptions: 자기 자신한테 받은 extraOptions
baseQuery: createApi.baseQuery와 동일
transformResponse: Response를 변환한다.
extraOptions: baseQuery혹은 queryFn으로 전송할 third argument
providesTags, invalidatesTags: Cache 데이터에 Tag를 붙여주고 어떤 Tag를 가진 데이터를 refetch 혹은 cache로부터 삭제해야할지 결정한다.
keepUnusedDataFor: subscribe되지 않았는지 특정 초가 지나면 refetch 되게 해준다.
onQueryStarted(arg, { dispatch, getState, extra, requestId, getCacheEntry, updateCachedData}): api query를 요청할때 호출된다( cache된 데이터를 끌고올때는 호출되지 않는다)
arg: query 요청시 매개변수
queryFulfilled: query가 fulfill한 데이터를 반환하는 Promise. 이후의 로직 처리도 가능하다
getCacheEntry: cache entry의 값
onCacheEntryAdded(arg, { dispatch, getState, extra, requestId, getCacheEntry, updateCachedData}) : 새 cache entry가 추가 되었을때(new endpoint + query parameters combination) 실행된다.
cacheDataLoaded, cacheDataRemoved : Promise. 이후 로직 처리하기 위해 사용.
react 에서 redux-toolkit 을 사용하기 위해서는 '@reduxjs/toolkit' 과 'react-redux' package를 설치해줘야한다.
npm install @reduxjs/toolkit react-redux
그리고 이전에 state를 호출하기 위한 getState와 action을 호출하기위한 dispatch를 사용하는 것 대신 'react-redux'의 useSelector와 useDispatch를 사용하면 된다. typescript의 type 미적용시 기본적인 사용법은 다음과 같다.
// src/features/icecream/IcecreamView.tsx
// type 미지정
import React from 'react';
import { useSelector, useDispatch } from 'react-redux'
import { ordered } from './icecreamSlice'
export const IcecreamView = () => {
const numOfIcecream = useSelector(state => state.icecream.numOfIcecream
const dispatch = useDispatch()
return(
<div>
<h2> Num of icecream - {numOfIcecream} </h2>
<button onClick={()=>dispatch(ordered())}>Order icecream</button>
</div>
)
}
typescript의 type을 지정해야한다면, store로부터 store states type과 dispatch type을 반환하도록 설정하고 이를 custom hook으로 custom useSlector와 useDispatch를 만들도록 한다.
그리고 위의 IcecreamView.tsx 에서 react-redux 의 useSelector, useDispatch를 사용하는 대신 customhook의 useAppSelector, useAppDispatch를 사용하도록 하면된다.
import { configureStore } from '@reduxjs/toolkit'
import cakeReducer from '../features/cake/cakeSlice'
import icecreamReducer from '../features/icecream/icecreamSlice'
const store = createStore({
reducer:{
cake:cakeReducer,
icecream: icecreamReducer
}
})
export default store
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
//src/app/hooks.ts
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
export const useAppDispatch= () => useDispatch<AppDispatch>()
