打造Redux中间件
简单的基本中间件: const customMiddleware = store => next => action => { if(action.type !== 'CUSTOM_ACT_TYPE') { return next(action) // 其他代码 } } 使用: import {createStore,applyMiddleware} from 'redux'; import reducer from './reducer'; import customMiddleware from './customMiddleware'; const store = createStore(reducer,applyMiddleware(customMiddleware));
let dispatched = null; let next = actionAttempt => dispatched = actionAttempt; const dispatch = customMiddleware(store)(next); dispatch({ type: 'custom',value: 'test' }); 你做的只是串行化的函数调用,并在每次的调用上传入适当的参数。当我第一次看到这个的时候,我也被这么长的函数调用串惊呆了。但是,在读了编写redux测试之后就理解是怎么回事了。 所以现在我们理解了函数调用串是怎么工作的了,我们来解释一下这个中间件的第一行代码: if(action.type !== 'custom') { return next(action); } 应该有什么办法可以区分什么action可以被中间件使用。在这个例子里,我们判断action的type为非custom的时候就调用 来点酷的redux的官方指导里有几个不错的例子,我在这里详细解释一下。 我们有一个这样的action: dispatch({ type: 'ajax',url: 'http://some-api.com',method: 'POST',body: state => ({ title: state.title,description: state.description }),cb: response => console.log('finished',response) }) 我们要实现一个POST请求,然后调用 import fetch from 'isomorphic-fetch' const ajaxMiddleware = store => next => action => { if(action.type !== 'ajax') return next(action); fetch(action.url,{ method: action.method,body: JSON.stringify(action.body(store.getState())) }).then(response => response.json()) .then(json => action.cb(json)) } 非常的简单。你可以在中间件里调用redux提供的每一个方法。如果我们要回调方法dispatch更多的action该如何处理呢? .then(json => action.cb(json,store.dispatch)) 只要修改上例的最后一行就可以搞定。 然后在回调方法定义里,我们可以这样: cb: (response,dispatch) => dispatch(newAction(response)) As you can see,middleware is very easy to write in redux. You can pass store state back to actions,and so much more. If you need any help or if I didn’t go into detail enough,feel free to leave a comment below! 如你所见,redux中间件非常容易实现。 原文地址:https://reactjsnews.com/redux... (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |