Redux介紹 「單次傳遞，全局共享」

Redux是集中狀態管理工具，類似於Vue的Pinia，可獨立於框架運行，所有組件可以從這個存儲區讀取和更新狀態，而無需通過多層組件進行 props 傳遞。Redux 就是一個這樣的工具，它將應用中的所有狀態集中管理，並確保狀態的一致性和可追溯性。

那麼甚麼是集中狀態管理工具呢?你會發現下圖store是獨立出來的，根據箭頭可得知所有組件皆可使用store的工具，並且任何一個組件也可透過一些方式去修改store，那就代表可以用任一個組件，同時對所有組件進行一些操作

下方為示意圖

• 無使用Redux
  由於React的單向數據流如果底層組件g發生變動，要更改到i、f、d等等分支就會非常麻煩
  

• 使用Redux
  使用 Redux 時，應用中的所有組件都可以直接訪問全局狀態，不再需要通過父子層級的數據傳遞。這意味著即使是深層次的組件變更，也可以輕鬆地影響整個應用的狀態，而不需要逐層傳遞 props 或事件處理。

抽象點，把資料設定在另一個頂節點，而這個節點是所有人的頂節點，這樣便可做到當你要傳輸父子組件以上的訊息，可能需要傳兩次以上，但這樣做可使得資源最多只需要傳遞兩次。

雖說傳遞但 Redux 的內部機制是通過 全局的 store 來管理狀態，實際上並不是傳遞數據，而是修改 store 中的狀態，然後通知所有依賴該狀態的組件進行更新。

• 那麼它們分別在做甚麼呢?

1.Redux Toolkit(RTK)-是一套工具集合體簡化書寫方式，也是react官方推薦的方式。

• 減少樣板代碼：RTK 自動幫助你處理 action 創建和 reducer 合併等繁瑣操作。
• 內置 immer 支持：immer 使你可以在 reducer 中直接修改 state，而不需要手動進行深層拷貝來保持不可變性。
• 簡化異步邏輯：RTK 提供了 createAsyncThunk 來簡化異步操作（例如 API 請求）的處理。
• 默認集成開發工具：Redux DevTools 和中間件如 redux-thunk 被內置於 RTK 配置中，無需額外設置。

2.React Redux-用來連接react-redux的中間件

React ---> (react-redux)獲取狀態 ---> React組件
React <--- (react-redux)更新狀態 <--- React組件

• Redux Toolkit 的安裝
  npm install @reduxjs/toolkit react-redux

以下9/28在更一次
建議結構

src
 |
 |--store
     |--index.js  用於彙整功能
     |--modules
           |
           |--功能.js 如counterSlice.js

功能

那我們在modules中新增一個功能counterSlice.js

在寫功能時需要先使用
import { createSlice } from "@reduxjs/toolkit";

這個套件，是會自動幫你建立一個架構name/initialState/reducers等

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

const counterSlice = createSlice({
    name: "counter",
    initialState: {
        count: 0,
    },
    reducers: {
        increment: (state) => {
            state.count += 1;
        },
        decrement: (state) => {
            state.count -= 1;
        },
    },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

• name：用來標識這個切片，它會作為 action type 的前綴來方便調試，也會顯示在 Redux DevTools 中。
• initialState：定義初始的 state，類似於在 React 中使用 useState 初始化的狀態。
• reducers：這是一組函數，用來定義如何處理不同的 action 並更新 state。這些函數會直接修改 state，因為 RTK 默認使用 immer 來自動處理不可變的數據操作。

Redux Toolkit 的 createSlice 不僅幫我們生成了 reducer，還自動創建了對應的 action creators，這些 action creators 是我們在 React 組件中調用的函數來觸發 state 變更。通過解構，可以方便地獲取這些 action。

寫好之後要進行算是封裝的動作就是最後的兩行

//解構actionCreater函數
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

store的index.js

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./modules/counterSlice";

const store = configureStore({
    reducer: {
        counter: counterReducer,
    },
});

export default store;

configureStore 是 RTK 提供的函數，用來簡化 Redux store 的配置過程。它不僅幫助我們組合 reducers，還自動添加了 redux-thunk 等中間件，並集成了 Redux DevTools 支持，這使得我們的開發流程更加順暢。

之後再store的reducer進行指定，至於counter基本上會跟reducer出來的name相同，當然要不同也行但不建議，這樣的話會導致可讀性下降

最後再匯出成store，這樣一個外部資源庫就好啦

下篇繼續