React
Redux
Redux-Toolkit
[Redux #3] Redux-Toolkit(RTK) & Redux thunk
2022/10/12 16:13:03
0
1575
在上一篇我們手動建立了 Redux 的相關內容後，對於 React 與 Redux 的串接有了基本的概念。
我們可以接著使用官網提供的 Template 來進行實作，此篇將會說明當中相關的 fuctoin 的用途及操作方法。
為什麼會有 Redux-Toolkit？
最主要的原因在於：
減少 Boilerplate（樣板）
要寫 Redux 時會需要建置許多的 boilerplate，建置 Store、Action、Action Type、Reducers….等，建置這些檔案很麻煩又費時，因此 Redux-Toolkit 提供了更簡潔的語法，讓工程師可以比較輕鬆的使用 Redux。
使用官網提供的 Template
npx create-react-app redux-essentials-example --template redux
可以看到專案裡直接提供 Redux 的 boilerplate，並使用 Counter 做一個小範例，以下會直接以檔案進行說明。
- src/index.js：直接寫好 Provider
- src/features/counter/Counter.js：一樣使用到 useSelector 及 useDispatch
- src/store.js：使用 configureStore 創建 store
- src/features/counter/counterSlice.js：
slice指的是將許多的 Reducer 或 actions 集合起來，因此這隻檔案就包含了 initialState、Actions、Reducers、ActionType 等內容。
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { fetchCount } from './counterAPI';
const initialState = {
value: 0,
status: 'idle',
};
// The function below is called a thunk and allows us to perform async logic. It
// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
// will call the thunk with the `dispatch` function as the first argument. Async
// code can then be executed and other actions can be dispatched. Thunks are
// typically used to make async requests.
export const incrementAsync = createAsyncThunk(
'counter/fetchCount',
async (amount) => {
const response = await fetchCount(amount);
// The value we return becomes the `fulfilled` action payload
return response.data;
}
);
// 整合了 reducer、action、actionType
export const counterSlice = createSlice({
name: 'counter',
initialState,
// 定義 reducers 及相關操作
reducers: {
// 根據名稱自動產生 action
increment: (state) => {
// 使用了 Immer 套件，讓原本 immutable 的 state 變為 mutative （不是真的 mutative 只是套件做了轉換）
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
},
// 使用 action.payload 取得值
incrementByAmount: (state, action) => {
state.value += action.payload;
},
},
// The `extraReducers` field lets the slice handle actions defined elsewhere,
// including actions generated by createAsyncThunk or in other slices.
extraReducers: (builder) => {
builder
.addCase(incrementAsync.pending, (state) => {
state.status = 'loading';
})
.addCase(incrementAsync.fulfilled, (state, action) => {
state.status = 'idle';
state.value += action.payload;
});
},
});
// 取得 Action，也等於 ActionType
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
// The function below is called a selector and allows us to select a value from
// the state. Selectors can also be defined inline where they're used instead of
// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
export const selectCount = (state) => state.counter.value;
// We can also write thunks by hand, which may contain both sync and async logic.
// Here's an example of conditionally dispatching actions based on current state.
export const incrementIfOdd = (amount) => (dispatch, getState) => {
const currentValue = selectCount(getState());
if (currentValue % 2 === 1) {
dispatch(incrementByAmount(amount));
}
};
export default counterSlice.reducer;
檔案裡面好像還有其他部分….?
要理解剩餘的部分，需要先了解什麼是「middleware」
- 後端中的 middleware：middleware 可以說是一種封裝的功能，是指從發出 HTTP 請求後，到應用程式接收回應前，用來處理特定用途的程式，比如說身份驗證、啟用路由等。
- Redux 中的 middleware：處理 action 傳遞到 store 之前的操作，像是一個 action 轉換，常常會在這邊處理非同步的操作。
常用的 Redux Middleware 套件
- Redux-thnuk
- Redux-saga
- Redux-observable
三個都是用來處理非同步的操作，其中 「redux-thnuk」被包含於 redux-RTK 中，以下將介紹 Redux-thnuk 此 middleware。
Redux-thnuk
簡單說就是一個 Function，原本的 action 會是一個 javaScript object，但有了 Redux-thnuk 之後，Action 就可以是一個 Function，如此一來我們就可以在這個 Function 裡面執行非同步的操作。
createAsyncThunk()
是 RTK 提供的一個創建 Redux-thunk 並簡化開發者要撰寫isLoading、error 和 data 繁瑣的過程。
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { fetchCount } from './counterAPI';
// 創建 Redux-thunk 並簡化開發者要撰寫isLoading、error 和 data 繁瑣的過程，的一個 Function
export const incrementAsync = createAsyncThunk(
// type
'counter/fetchCount',
// payloadCreator(arg, thunkAPI)
async (amount, thunkAPI) => {
const { dispatch, getState, extra, requestId, signal, rejectWithValue, fulfillWithValue } = thunkAPI;
const response = await fetchCount(amount);
// The value we return becomes the `fulfilled` action payload
return response.data;
}
);
incrementAsync.pending(); // 'counter/fetchCount/pending'
incrementAsync.fulfilled(); // 'counter/fetchCount/fulfilled'
incrementAsync.rejected(); // 'counter/fetchCount/rejected'- createAsyncThunk 會根據 type 自動產生出三個對應的 action function ：
pending()、fulfilled()、rejected() - thunk 會在執行 payload creator 之前 dispatch
pending()，接著根據 Promise 變成對應的fulfilled()、rejected()
如何使用 pending()、fulfilled()、rejected()
由於這幾個 Action 並不是在 Slice 中被定義，所以如果要監聽這三個 Type，需要在 extraReducers 中透過 builder.addCase 來使用
// 整合了 reducer、action、actionType
export const counterSlice = createSlice({
name: 'counter',
initialState,
// 定義 reducers 及相關操作
reducers: {
// 根據名稱自動產生 action
increment: (state) => {
// 使用了 Immer 套件，讓原本 immutable 的 state 變為 mutative （不是真的 mutative 只是套件做了轉換）
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
},
// 使用 action.payload 取得值
incrementByAmount: (state, action) => {
state.value += action.payload;
},
},
// 由於 AsyncThunk 這些 action 並不是在 slice 中被定義，
// 所以如果要在 createSlice 中監聽這些 action type，需要在 extraReducers 中透過 builder.addCase 來使用。
extraReducers: (builder) => {
builder
.addCase(incrementAsync.pending, (state) => {
console.log(state.status);
state.status = 'loading';
})
.addCase(incrementAsync.fulfilled, (state, action) => {
console.log(state.status);
state.status = 'idle';
state.value += action.payload;
});
},
});
重點筆記
- Redux-Toolkit（RTK）解決了 Redux 大量 boilerplate 的問題，提供 Redux 配置模板。
slice：指的是將許多的 Reducer 或 actions 集合起來。createSlice()：整合了 reducer、action、actionType。- Immer：是一個套件，讓原本 immutable 的 state 變為 mutative （不是真的 mutative 只是套件做了轉換）。
- Redux 中的 middleware：處理 action 傳遞到 store 之前的操作，像是轉換 action，常常會在這邊處理非同步的操作。
- createAsyncThunk()：是 RTK 提供的一個創建 Redux-thunk 並簡化開發者要撰寫
isLoading、error和data繁瑣的過程。
參考資料
相關文章
