在 上一篇文章 中介绍了 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,
});

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

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

相关文章