Инструментарий Redux для запросов или сокращенно RTK query — это величайшее изобретение человечества со времен колеса. Он упрощает выполнение асинхронных задач, таких как получение данных из API. В этой статье я покажу вам, как настроить ваш проект на использование RTK-запросов.
-
Запустите create-react-app
-
Установите следующие зависимости.
npm install react-redux @reduxjs/toolkit
Внимание
обратите внимание, что все файлы для одной функции должны находиться в одной папке, то есть все, что касается постов, должно находиться в папке posts.
Содержание
настройка магазина
// src/app/store.js
import { configureStore } from "@reduxjs/toolkit"
import { apiSlice } from "./api/apiSlice";
export const store = configureStore({
reducer: {
// reducer for slice goes here
},
})
export default store
Предоставить магазин приложению
оберните все приложение магазином.
// index.js
import App from './App';
import { store } from './app/store'
import { Provider } from 'react-redux'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
создать фрагмент API
// src/app/api/apiSlice.js
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
const baseQuery = fetchBaseQuery({
baseUrl: "https://ifeanyi-stock-backend.herokuapp.com/"
})
export const apiSlice = createApi({
baseQuery: baseQuery,
endpoints: builder => ({})
})
Добавьте редуктор API Slice в магазин.
apiSlice.reducerPath помогает нам динамически присваивать имя редуктору среза API.
import { configureStore } from "@reduxjs/toolkit"
import { apiSlice } from "./api/apiSlice";
export const store = configureStore({
reducer: {
[apiSlice.reducerPath]: apiSlice.reducer
},
middleware: getDefaultMiddleware => getDefaultMiddleware().concat(apiSlice.middleware),
devTools: true
})
Спасибо, пожалуйста, следуйте за мной
twitter
github
linkedin