【React Native】Redux自定义中间件
2008 年 9 月 25 日
在 上一篇文章
中介绍了 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,
});
接下来就可以尝试输入非数字检测中间件是否生效。
完整代码可以在 这里
查看。
About The Author
bjmayor
程序员，码农，php,python,ios,android,go，产品经理，创业。