react redux toolkit query

react-native에서 redux toolkit query 사용 예시입니다.

 

 

• 설치

npm install @reduxjs/toolkit

 

• 미들웨어 추가

import {configureStore} from "@reduxjs/toolkit"; 
import {apiSlice} from "./apiSlice";

export const store = configureStore({
   reducer: {
       [apiSlice.reducerPath]: apiSlice.reducer,
   },
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(apiSlice.middleware)

})

 

 

• 슬라이스 추가

import {createApi, fetchBaseQuery} from "@reduxjs/toolkit/query/react";
import ApiEP from "../ApiEP";

export const apiSlice = createApi({
    reducerPath: 'apiSlice',
    baseQuery: fetchBaseQuery({
        baseUrl: ApiEP()
    }),
    endpoints: (builder) => ({
        getAbc: builder.query({
            query: (arg) => {
                return {
                    url: '/abc/AutoComplete',
                    method: 'POST',
                    body: {
                        from: arg,
                    },
                }
            }
        }),
    }),
})

export const {useGetAbcQuery} = apiSlice;

 

 

 

• 사용 예시

    import {useGetAbcQuery} from "../../utils/redux/apiSlice";
    
    const { data, isLoading, isError } = useGetAbcQuery("bg.kim@dc-on.co.kr");

    console.log("isLoading", isLoading)
    console.log("isSuccess", isError)
    console.log("a_data", data)