什麼是 Redux Toolkit Query?

Redux Toolkit Query 官方簡稱 RTK Query RTK Query 是一種進階數據獲取和緩存工具，用意在簡化在 Web 應用程序中加載數據的常見情況。

RTK Query 本身構建在 Redux Toolkit 核心之上，所以也不用另外再安裝套件，並利用 RTK 的 API（如 createSlice 和 createAsyncThunk）來實現其功能。

簡單來說，就是 Redux Toolkit 整合 API 的套件化工具！

Project Setup

這次會做一個簡單的 Todo List 來示範基本的操作，那麼這部分的 API server 我採用我之前做的範例 利用 nestjs 來製作簡單的 express server，大家可以從我的 github 連結 去參考安裝，這部分必須感謝 Jack Herrington 大家可以多多訂閱他的頻道，我有很多的細節觀念都是從他的教學影片學到的，那以下我要分享的也是他製作的 npm 套件，如果想要自己製作一個相同的 API server 的話，請看以下步驟：

npx create-mf-app

接著會要你輸入專案名稱、專案性質、框架選擇，那基本上就是 API server, nestjs-todo, 然後調整一下 port 號，就幾乎完成了，接下來的步驟就是移動到該資料夾下安裝，然後讓 server run 起來即可。

有了 server 之後，我們就可以來製作 client 端的部分了，一樣我們透過 vite 來安裝一個 rtk_query 的專案，為了公平這次採用 Typescript 來做示範，如下：

npm create vite@latest
or
yarn create vite

(記得選擇 Typescript 喔！) 安裝完成之後我們按照指令移動到該路徑下，輸入安裝的指令。

npm install
or
yarn

讓我們再次欣賞 vite 美美的畫面吧！

npm run dev
or
yarn dev

接著安裝我們會用到的 redux 套件：

npm install redux react-redux @reduxjs/toolkit
or
yarn add redux react-redux @reduxjs/toolkit

完成後我們一樣將畫面清理一下，讓畫面變成簡單的 Hello World ! 首先，將 src 內裝有 svg 的資料夾刪除，接著將 app.css 刪除，接著將原本的 App.jsx 整理成以下：

// App.tsx
function App() {
  return (
    <div className="container">
      <h1>Hello World!</h1>
    </div>
  )
}

export default App

接著我們簡單整理一下 index.css 如下：

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  padding: 0;
}

.container {
  width: min(100%, 768px);
  padding: 0 2rem;
  margin: 0 auto;
}

此時畫面應該只剩下 Hello World !

那我們一樣從 store.js 開始下手製作，和前面 react-redux 作法相同，於 src 內新增 features 的資料夾，並新增一個 store.js 的檔案，內容如下：

// src/features/store.ts
import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: {},
})
// RootState要記得下export來提供slices使用
export type RootState = ReturnType<typeof store.getState>

export default store;

處理完 store 要給 react-redux 的 Provider 使用，讓我們回到 main.tsx 裏面做以下修改：

// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import App from './App'
import store from './features/store'
import './index.css'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)

這裡會發現 store.ts 我多處理了一行 RootState，下一篇我可以示範一個基本的 count 來給各位參考 Typescript 的環境下我大概會怎麼處理。