Redux

基本步驟

1. 安裝套件

   • npm i @reduxjs/toolkit react-redux
     redux toolkit是封裝過，更好的redux，而react-redux是讓元件和redux溝通的工具

2. 設置slice檔案，裡頭包含

   • slice 它是Redux reducers和actions的集合
   • action 它是物件，他包含資訊的內容(payload)。是更新 Redux store的唯一資訊來源
   • reducers 它是函式，根據傳遞給它的actions，用來表示state會如何改變
   • export action creator 它是函式，目的是會回傳一個具有適當 type 和 payload 屬性的action物件，然後可以將其發送到 store 以觸發相應的 reducer 函式
   • export root reducer

3. 設置store檔案

   • 到store裡設定configureStore，建立redux store

4. 讀取或更新Redux store中的資料

   • 在你需要的地方使用useDispatch和useSelector做操作

實際範例
若要在網頁中使用 Redux 管理電商網站裡 cartItems 的狀態，可以使用 Redux Toolkit 中的 createSlice 函式。

下面舉例說明如何創建管理 cartItems 狀態的 cartSlice ：

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

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    cartItems: [],
  },
  reducers: {
    addItem: (state, action) => {
      state.cartItems.push(action.payload);
    },
    removeItem: (state, action) => {
      state.cartItems = state.cartItems.filter(
        item => item.id !== action.payload.id
      );
    },
  },
});

export const { addItem, removeItem } = cartSlice.actions; //action creators
export default cartSlice.reducer; //root reducer

在範例中，我們用 createSlice 創建了 cartSlice。將一個object傳遞給 createSlice，定義slice的名稱、初始狀態和其 reducers。我們定義了兩個 reducers，addItem 和 removeItem，這讓我們對購物車添加和刪除項目。

創建slice後，就可以將reducer 傳遞給 Redux Toolkit 的 configureStore 函式以創建 Redux store。

import {configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';

const store = configureStore({
  reducer: {
    cart: cartReducer,
  },
});

export default store;

最後，可以使用 react-redux 中的 useSelector 在組件中訪問 cartItems 的狀態。或是用useDispatch來更新Redux store中的state

import React from 'react';
import {useSelector,useDispatch } from 'react-redux';
import {addItem} from "./cartSlice"

const Cart = () => {
  const cartItems = useSelector(state => state.cart.cartItems);
  
  const newItem = {id:1,name:"Apple"}
  const dispatch = useDispatch();
  dispatch(addItem(newItem))
  // ...
};

Redux Persist

Redux Persist 是一個library，它允許你將 Redux store中的資料保存在能長久儲存的空間中，例如瀏覽器的localStorage，這樣即使在瀏覽器刷新或關閉後也能保留應用程序的state。

基本步驟

1. npm install redux-persist
2. 在 Redux store 中，新增 Redux Persist 到 Redux store，並創建一個persistConfig object，指定 Redux Persist 的key和storage option 。key應該是獨一無二的，而存儲選項可以設置成 storage存在localStorage。
3. 將 persistConfig 和root reducer 作為參數傳入 persistReducer 函式，以定義persistedReducer。
4. 將root reducer 傳遞給 configureStore 函式。最後使用 persistStore 函式來創建一個 persistor。到這裡Redux store就算設置完成

import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import rootReducer from './reducers';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

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

export const persistor = persistStore(store);

6. 回到你的root component中，設置 PersistGate 元件來包裹我們的的應用程式，並將 persistor 作為 prop 傳入

在React root component (通常是index.js)使用 PersistGate 元件

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
import App from './App';

const root = createRoot(document.getElementById("root"));
root.render(
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
);

以上就是Redux和Redux-persist的基本操作

參考文章:

• redux-toolkit

以上若有任何錯誤或建議，都歡迎留言給我，謝謝😄