Pokemon Card Flip - 4.reduxTookit, tanstackquery 설치

npm install @reduxjs/toolkit react-redux

터미널로 reduxtoolkit 설치

 

 

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

export const store = configureStore({ reducer: {} });

 

configureStore 메서드로 store 생성

 

 

import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { store } from "./store";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Provider } from "react-redux";

const queryClient = new QueryClient();
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <Provider store={store}>
      <App />
    </Provider>
);

 

Provider 컴포넌트로 생성했던 store를 import해서 전달해주면 끝

 

npm i @tanstack/react-query

 

터미널로 tanstackquery 설치

 

import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { store } from "./store";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Provider } from "react-redux";

const queryClient = new QueryClient();
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <QueryClientProvider client={queryClient}>
    <Provider store={store}>
      <App />
    </Provider>
  </QueryClientProvider>
);

 

QueryClient, QueryClientProvider import 후 queryClient 객체 생성후 

QueryClientProvider 컴포넌트로 client를 넘겨주면 완료!