Install
redux-toolkit
npm install @reduxjs/toolkit
TodoModel
interface TodoModel {
id: number;
title: string;
content: string;
}
Create API Slice
createApi와 fetchBaseQuery를 import 해줍니다.
import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react';
저는 TodoList를 기반으로 아래와 같이 만들어 주겠습니다.
reducerPath: 스토어의 reducer로 지정할 Path의 이름
baseQuery: 기본으로 지정할 서버 URL
tagTypes: 자동으로 데이터가 패치되게 구별할 타입
endpoints: 엔드 포인트들
export const todoAPISlice = createApi({
reducerPath: 'todoAPI',
baseQuery: fetchBaseQuery({baseUrl: '서버URL'}),
tagTypes: ['Todos'],
endpoints: builder => ({
...
Get all todos
builder.query에 받아올 데이터 타입을 입력한 뒤,
query: () => endpoint를 입력해 줍니다.
providesTags는 invalidatesTags가 실행될 때 자동으로 패치될 쿼리를 나타냅니다.
(providesTags의 자세한 부분은 여기 를 참고해 주세요)
getAllTodos: builder.query<TodoModel[], String>({
query: () => '/allTodos',
providesTags: ['Todos'],
}),
add a todo
builder를 mutation으로 만들고 query의 파라미터에 새롭게 추가할 TodoModel을 받아옵니다.
그 다음 url에 endpoint를 입력해 주고, method는 POST, body에 파라미터의 todo를 넣어줍니다.
그리고 invalidatesTags에 태그를 입력해 주어 해당 쿼리가 실행되면 providesTags가 자동으로 패치되도록 해줍니다.
addTodo: builder.mutation({
query: (todo: TodoModel) => ({
url: '/addTodo',
method: 'POST',
body: todo,
}),
invalidatesTags: ['Todos'],
}),
edit a todo
addTodo와 거의 동일하지만 url의 파라미터 todo의 id를 넣어주고,
method는 PUT,
그리고 추가할 todo 모델을 body에 넣어줍니다.
addTodo와 마찬가지로 invalidatesTags를 추가해 데이터가 수정이 되면 자동으로 패치되도록 합니다.
editTodo: builder.mutation({
query: (todo: TodoModel) => ({
url: `/todo/${todo.id}`,
method: 'PUT',
body: todo,
}),
invalidatesTags: ['Todos'],
}),
delete a todo
url의 파라미터 todo의 id를 넣어주고,
method는 DELETE,
invalidatesTags를 추가해 데이터가 삭제가 되면 자동으로 패치되도록 합니다.
deleteTodo: builder.mutation({
query: (id: number) => ({
url: `/todo/${id}`,
method: 'DELETE',
}),
invalidatesTags: ['Todos'],
}),
마지막으로 todoAPISlice의 쿼리들을 export 해줍니다.
해당 endpoint에 맞게 쿼리 이름이 자동으로 지정됩니다.
ex) deleteTodo => useDeleteTodoMutation
export const {
useGetAllTodosQuery,
useAddTodoMutation,
useEditTodoMutation,
useDeleteTodoMutation,
} = todoAPISlice;
configureStore
configureStore에 위에서 지정해준 reducerPath를 todoAPISlice의 reducer로 지정해 줍니다.
그 다음 middleware를 todoAPISlice의 middleware로 지정해 줍니다.
const store = configureStore({
reducer: {
[todoAPISlice.reducerPath]: todoAPISlice.reducer,
},
middleware: getDefaultMiddleware =>
getDefaultMiddleware().concat(todoAPISlice.middleware),
});
APIProvider
APIProvider를 import 해주고,
import {ApiProvider} from '@reduxjs/toolkit/dist/query/react';
App을 APIProvider로 감싸 준뒤 api를 위에서 만들어준 todoAPISlice로 지정해 줍니다.
const App = () => {
return (
<ApiProvider api={todoAPISlice}>
<Provider store={store}>
<Home />
</Provider>
</ApiProvider>
);
};
Use apislice queries
가장 먼저 데이터를 받아올 useGetAllTodoQuery를 import 해줍니다.
import {useGetAllTodosQuery} from '../api/TodoAPISlice';
아래와 같이 data를 받아옵니다.
const {data} = useGetAllTodosQuery('');
FlatList에 해당 data를 연결해 주면 서버에 있는 데이터가 FlatList에 띄워지게 됩니다.
<FlatList
style={styles.list}
contentContainerStyle={{paddingBottom: 50}}
data={data}
...
추가나 수정도 똑같이 import 해주고
import {useAddTodoMutation} from '../api/TodoAPISlice';
import {useEditTodoMutation} from '../api/TodoAPISlice';
아래와 같이 액션을 만들어 준 뒤
const [addTodo] = useAddTodoMutation();
const [editTodo] = useEditTodoMutation();
todo를 담아 실행해 주면
addTodo(todo);
editTodo(todo);
원하는 todo가 추가되고 수정되게 됩니다.
댓글