【React Native】Redux自定义中间件

前言

在上一篇文章中介绍了Redux在React Native中的基本使用，这篇文章介绍一下如何在Redux中自定义中间件。

中间件功能

中间件的作用主要是拦截指定的Action，进行自定义操作后继续执行该Action或指派执行其他Action。这里拦截的Action主要是指同步的Action，异步Action在Thunk中间件已经提供了相关功能。

自定义流程

创建中间件

以上一篇文件的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);
}

这个中间件本质是一个嵌套的方法，外层方法会传入next和action， 我们可以用action的type区分不同的动作。如果是用Slice方式创建的Action``Type格式是这样的：auth名称/action名称。

在上面的方法中拦截了incrementAction和decrementAction两个方法，检查用户输入的是不是数字，如果不是数字则执行errorInput这个Action。

使用中间件

要使创建的中间件生效，只需要在创建Store时传入相应的中间件即可。

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

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

接下来就可以尝试输入非数字检测中间件是否生效。

完整代码可以在这里查看。