【React Native】Redux自定義中介軟體

語言: CN / TW / HK

上一篇文章 中介紹了 ReduxReact Native 中的基本使用,這篇文章介紹一下如何在 Redux 中自定義中介軟體。

中介軟體功能

中介軟體的作用主要是攔截指定的 Action ,進行自定義操作後繼續執行該 Action 或指派執行其他 Action 。這裡攔截的 Action 主要是指同步的 Action ,非同步 ActionThunk 中介軟體已經提供了相關功能。

自定義流程

建立中介軟體

以上一篇檔案的 Demo 為例,這裡新增一個引數檢查的中介軟體。新建 CheckParameterMidleware.js ,新增如下程式碼:

export function checkParameterMiddleware({ dispatch }) {
    return function(next){
        return function(action){
            console.debug(action);
            if (action.type === 'counter/incrementAction' || action.type === 'counter/decrementActio') {
                console.debug(action);
                if (!checkIsNumber(action.payload)) {
                    return next(errorInput("請輸入數字!"));
                }
            }
            return next(action);
        };
    };
}


function checkIsNumber(value) {
    return typeof value === 'number' && !isNaN(value);
}

這個中介軟體本質是一個巢狀的方法,外層方法會傳入 nextaction , 我們可以用 actiontype 區分不同的動作。如果是用 Slice 方式建立的 Action``Type 格式是這樣的: auth名稱/action名稱

在上面的方法中攔截了 incrementActiondecrementAction 兩個方法,檢查使用者輸入的是不是數字,如果不是數字則執行 errorInput 這個 Action

使用中介軟體

要使建立的中介軟體生效,只需要在建立 Store 時傳入相應的中介軟體即可。

const middleware = [
    ...getDefaultMiddleware(),
    checkParameterMiddleware
];

export const store = configureStore({
    reducer: {
        count: countReducer,
    },
    middleware,
});

接下來就可以嘗試輸入非數字檢測中介軟體是否生效。

完整程式碼可以在 這裡 檢視。