在整進 React 專案之前我們必須了解一件事，Redux 是可以單獨獨立運作的，這也是我們之前所做的兩個 project 驗證的結果，大家應該都不陌生，兩個 Redux 的應用程序也都沒有使用到 React 的套件對吧！

什麼是 React Redux ?

整合進入 React 的專案會怎樣，這裡 Redux 官方給出了一個 React-Redux 的套件方便整合進 React 的生命週期，它讓 React 組件從 Redux 存儲中讀取數據，並將操作分派到存儲以更新狀態。

簡單來說他就是兩個獨立的 liberary 的綁定套件，有了它就能更便捷的結合這兩個獨立的個體。

為何使用 React Redux ?

照這樣的概念不使用此套件也可以正常於專案內運行 Redux，不過這些渲染時機、前端效能優化、資料綁定…，就必須自己來了，與其說官方推薦使用，不如說為了省麻煩而使用，前面的兩個範例也讓你熟悉一波不使用的情境，如果要架在其他框架且沒找到官方推薦套件的話，就可以採用此方式導入。

更加深入的解釋可以參考 —官方文件

那麼我們先另外起一個 React 的專案，你可以用任何你習慣的方式去安裝 React，但這邊我會採用 vite 的方式安裝，沒什麼特別，就單純不想等那麼久，你可以選擇用 yarn 或是 npm：

npm create vite@latest
or
yarn create vite

這裡的範例我單純示範 js 的版本，怕新手消化不良，如果習慣採 Typescript 就選擇使用吧！我也有額外提供 Typescript 的使用範例。 — rtk_ts

安裝完成之後我們按照指令移動到該路徑下，輸入安裝的指令。

npm install
or
yarn

接著我們嘗試將專案 run 起來：

npm run dev
or
yarn dev

這時可以看見我們的專案跑在 port:5137，如果想要改回 3000 的話可以至 vite.config.js 內做以下修改：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [react()]
})

不得不說現在的起始畫面要比我之前在使用 vite 的時候精緻許多，但基本上該整理的還是要整理，讓畫面變成簡單的 Hello World ! 首先，將 src 內裝有 svg 的資料夾刪除，接著將 app.css 刪除，接著將原本的 App.jsx 整理成以下：

// App.js
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 ! ，接著我們安裝 redux, reduxtoolkit, react-redux 三個套件：

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

此時檢查一下自己的 package.json 是否有安裝完成，如下：

{
  "name": "with_react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "redux": "^4.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.1.0",
    "vite": "^3.1.0"
  }
}

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

// src/features/store.js
import { configureStore } from '@reduxjs/toolkit'

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

export default store

此時可以採用 import 的方式引入了，是不是好用很多，完成後，我們回到 main.jsx 的檔案，做以下的修改：

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
// 引入 react-redux 的 Provider
import { Provider } from 'react-redux'
// 引入剛才定義好的 store
import store from './features/store'

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

此時就算是完成基本的設定了，下一篇我們來新增前面的商品與畫面應用吧！