Redux middleware

本文為 Lidemy [FE303] React 的好夥伴：Redux > Redux 核心：Middleware 的筆記內容

零、redux 的最後一塊拼圖： middleware

懶人工具包：Redux Toolkit

仲介：middleware

• 函式處理仲介：redux thunk 讓 action 變身成函式，不只是物件

一、Redux Toolkit 簡稱 RTK

1. 為什麼要用它？

因 redux 基本設置（boilerplate）過多，寫起來很煩，因此 Redux Toolkit 就是把 Redux 包裝好，讓你不用自己去處理 store 那些的一個工具包，有點懶人包的概念。

2. 要怎麼安裝？

a. 結論：跟官網不同的是，我用的是 $ npx create-react-app@latest blog --template redux，這個會一次把 react/redux/redux toolkit/react-redux 都裝好

b. 安裝過程

b.1 指令 $ npx create-react-app my-app --template redux 一直報錯，就把 vs code 刪掉重裝了。

b.2 重裝沒效，最後用了 $ npx create-react-app@latest blog 雖然跑得起來，可是那是純 react，所以現在要跑的話要用下面的：

b.3 $ npx create-react-app@latest blog --template redux 就可以一次把 react/redux/redux toolkit/react-redux 都裝好

c. 檔案導覽

• 裡面的 store、Provider 都幫你設置好了

• createSlice 就像一個完整的功能: 裡面結合了 action, reducer, actionTypes

  • toolkit 底層用了 immer 這個套件能讓我們直接更改狀態，不用再寫什麼 ...state 回傳一個新的狀態之類的

// Redux Toolkit allows us to write "mutating" logic in reducers. It
// doesn't actually mutate the state because it uses the Immer library,
// which detects changes to a "draft state" and produces a brand new
// immutable state based off those changes

• toolkit 把 aciton 跟 actionTypes 結合在一起，變成一個函式

參考 Reducers and actions 下面的 methods createReducer()

二、Redux middleware

又稱中間件，是一個仲介的概念；看起來常用在「非同步的事件處理上」，例如：呼叫 API 或者處理登入事件等

我的理解：middleware 很像是交通仲介，例如說我有一個 action 是從 A 地到 B 地，那 middleware 幫我做的事可能是「買車票」

參考資料：Thunks and Async Logic、詳解 Redux Middleware

三、Redux thunk 把物件般的 action 變成函式

Redux thunk 是一個執行函式的 middleware，把 action 變成函式，並且執行這個函式。

四、把 blog 加上 redux

?1. 整理資料夾結構

• components folder

  • App folder

  • NavBar folder

• pages

  • 各式各樣的頁面們.js

• redux

  • reducers folder

    • postReducer.js

  • store.js

• contexts.js

• index.js

• utils.js

• WebAPI.js

註：解決的問題包含沒有裝 react-router-dom 以及檔案路徑問題（用越多工具就要裝來裝去，難怪需要工具管理程式來管理）

2. 02'30" 改寫單一文章功能

a. 實作步驟：

a.1 創建 store

// store.js

import { configureStore } from '@reduxjs/toolkit';
import postReducer from './reducers/postReducer';

export default configureStore({
    reducer: {
    posts: postReducer,
  },
});

a.2 創建 reducers 資料夾 > postReducer.js

// postReducer.js

import { createSlice } from '@reduxjs/toolkit';
import { getArticle } from '../../WebAPI';

// 定義 reducer 裡面的行為
export const postReducer = createSlice({
  name: 'posts',
  initialState: {
    isLoadingPost: false,
    // 這裡設為 null 會報錯：Uncaught TypeError: Cannot read properties of null
    // 正確寫法：post: "",
    post: null,
  },

  reducers: {
    setIsLoadingPost: (state, action) => {
      state.isLoadingPost = action.payload;
    },

    setPost: (state, action) => {
      state.post = action.payload;
    },
  }
});

export const { setIsLoadingPost, setPost } = postReducer.actions;

// call API
export const getPost = (id) => (dispatch) => {
  dispatch(setIsLoadingPost(true));
  getArticle(id)
    .then((res) => {
      dispatch(setPost(res));
      dispatch(setIsLoadingPost(false));
    })
    .catch((err) => {
      console.log(err);
    });
};

export default postReducer.reducer;

a.3 把剛剛在 reducer 定義的呼叫 API 的函式拿到 Article 頁面裡用

// ArticlePage.js

import { getPost } from '../../redux/reducers/postReducer';
import { useDispatch, useSelector } from "react-redux";

export default function ArticlePage() {
  let { id } = useParams();
  const dispatch = useDispatch();
  const isLoading = useSelector((store) => store.posts.isLoadingPost);
  const article = useSelector((store) => store.posts.post);

  useEffect(() => {
    dispatch(getPost(id));  
  }, [id, dispatch])

  return <Article article={article} />;
}

註：要測試 react and redux 有沒有串起來，影片裡面用的是 console.log(isLoading)，因為預設值是 false，所以如果印出的值把它改成 true 還是正常印出來，那就表示有抓到

b. error log

debug 第一個路徑就是開 redux 的 devtool，去看看有沒有發生你預期的行為，在這裡就是有沒有發送 API 去抓資料

ArticlePage.js:29 Uncaught TypeError: Cannot read properties of null (reading 'title')

都改寫好以後，出現這個錯誤訊息，發現 Article component 沒有抓到標題跟內容，照著影片嘗試了 console.log(isLoading) 發現有從 false 變成 true，因此確定有把 react redux 串起來，API 的部分也沒有錯

註：console.log(isLoading) 超可怕的，整個 devtool 就一直跳訊息，電腦燒起來了

• 嘗試：更改 props 名稱，但是發現不管什麼名稱都一樣，因為排除這個原因

• 嘗試：把 useEffect 拿掉，發現有時候可以運作有時不行，怪怪的

• 嘗試：把 cookie 跟紀錄全部清掉，但不確定有沒有影響

• 嘗試：後來發現是「不可以重新整理頁面，如果重新整理頁面，就會發現壞了，而這個應該跟我的頁面是 SPA 有關」，上述錯誤訊息還是存在，但是只要「不重新整理頁面」功能就是好的。

• 嘗試：reducer post 初始化狀態設為 "null" 是錯的，設為 "" 就不會有這個錯了，這樣重新整理頁面、怎麼點擊跳轉都是正常的，太好了。

註：後來發覺用 [] 比 "" 好

五、改寫發表文章功能

a. 實作步驟

新增一個 reducer 裡面的狀態 -> newPost 去抓 API -> 引入 dispatch & selector -> 當新增文章時，去呼叫 API -> 當成功新增文章時，就導到首頁

要解決的問題：新增文章跳轉到首頁以後，再按一次新增文章，會跳到上一篇新增文章單一頁面，但應該是新增文章輸入頁面才對

第一種：離開頁面時，把 newpostresponse 清空

useEffect(() => {
  return () => {
    dispatch(setNewPostResponse(null));
  }
}, [dispatch])

第二種：

利用 redux thunk 能夠回傳一個 promise 的功能，直接拿到 newPostResponse 的值，連 selector 都省了

a. 原本在 reducer 抓 API 長這樣

export const newPost = (data) => (dispatch) => {
  newArticle(data).then((res) => {
    dispatch(setNewPostResponse(res));
  });
};

b. 但現在在裡面回傳一個 promise

export const newPost = (data) => (dispatch) => {
  return newArticle(data).then((res) => {
    dispatch(setNewPostResponse(res));
    return res;
  });
};

c. 接著在頁面那邊把那個 promise 改寫

const handleNewArticle = () => {
  setErrorMessage(null);
  if (!title || !body) {
    const errorMessage = "Please input missing field";
    setErrorMessage(errorMessage);
  } else {
    dispatch(newPost({
      title,
      body
    })).then((newPostResponse) => {
      if (newPostResponse && newPostResponse.id) {
        navigate("/posts/" + newPostResponse.id);
      }
    })
  }
};

第三種：

利用 isLoadingNewPost 來判斷時間點，新增一個 isLoadingNewPost 的狀態，藉由判斷狀態來規範何時要導回「剛剛新增的文章頁面」

有一個情況就是「剛剛正在 loading，而現在沒有在 loading 了」

if (!isLoadingNewPost && prevIsLoadingNewPost) -> 假設符合這個狀態，就表示已經拿到 response 了

作法：在 reducer 新增一個 isLoadingNewPost 的狀態，並且使用 usePrevious 這個別人做好的 hook，來實現這個做法

b. error log: VM4939:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

問題描述：無法新增文章，不會跳轉頁面；打開 redux devtool，沒有任何紀錄，react redux 沒有串起來

b.1 解法一：Unexpected token < in JSON at position 0

• API 網址錯誤

• 把最後面的 .then((res) => res.json()); 換成 .then((res) => res.text());

這樣 redux dev tool 真的有去呼叫 newPost 那支 API 了，但是這個解法好奇怪

b.2 解法二：搞了半天是 WebAPI 裡面的寫法，需要的資料要解構語法，寫完以後總算有去呼叫 newPost 這個 API 了

然後再把 newArticlePage 裡面的名稱改好，要叫做 title & body 相關，不能用其他的

// 原本是寫成...(title, body)...

export const newArticle = ({ title, body }) => {
  const token = getAuthToken();
  return fetch(`${BASE_URL}/posts`, {
    method: "POST",
    headers: {
      "content-type": "application/json",
      authorization: `Bearer ${token}`,
    },
    body: JSON.stringify({
      title,
      body,
    }),
  }).then((res) => res.json());
};

六、簡單介紹 redux saga 與 redux observable

學習曲線很高，這兩個可能都要學超過一個月（？）其中要學 redux observable，建議先從 observable 開始，接著再進入 redux observable 比較好。