三寸天堂，我只为我那一片三寸日光，进来前，希望各位看看步步惊【明光吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：99,767贴子：
三寸天堂，我只为我那一片三寸日光，进来前，希望各位看看步步惊收藏
康熙，8岁登机，在位61年，我想说的是他的儿子雍正和一侍女的爱情。。。。如果说一个男的能像雍正对马尔泰若曦那样，我想作为那个女子，她应该感到无比的幸福，男人有的时候好多话说不出来，如果是一个懂事的女孩，她应该会为自己的男人想，而不是一味的纠缠，胡搅蛮缠，女人想拴住男人的心，不是要盯，而是要去了解你爱的男人的心，他想玩，让他玩，让他玩够，男人的心理总会有个家，这是改变不了的。哎，不知道说什么了。。操蛋。
这条路我们走得太匆忙 拥抱着并不真实的欲望 来不及等不及回头欣赏 木兰香遮不住伤
是一步一惊吗。然后惊着惊着就死了。
登录百度帐号推荐应用在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
接触到redux有半个月之久了，最初是被各种概念绕的云里雾里，但是最近自己实现了一个demo之后，才发现redux是如此简洁，简洁到源代码就五部分组成，最大的createStore.js也就151行代码而已。
createStore.js
applyMiddleware.js
bindActionCreators.js
combineReducers.js
compose.js
redux的魅力在于其简洁和FP编程思想。像reducers的设计、curry编程风格等都散发出淡淡的FP的味道。下面言归正传，进入middleware部分。下面由几个问题领着大家看看middleware的真面目。
1.什么是middleware？
学过nodejs的人对middleware一定不会陌生。在nodejs里面，middleware是req和res之间的中间层，可以做很多事情。但在redux里面，middleware又是什么呢。middleware文档里面有这样一句话：
It provides a third-party extension point between dispatching anaction, and the moment it reaches the reducer.
不难理解，在redux里，middleware是发送action和action到达reducer之间的第三方扩展，也就是中间层。也可以这样说，middleware是架在action和store之间的一座桥梁。
2.为什么要引入middleware？
也许有人会问，到底middleware有什么用？这就要从action说起。在redux里，action仅仅是携带了数据的普通js对象（ plain JavaScript objects）。action creator返回的值是这个action类型的对象。然后通过store.dispatch()进行分发……
action ---& dispatcher ---& reducers
同步的情况下一切都很完美……如果遇到异步情况，比如点击一个按钮，希望2秒之后更新视图，显示消息“Hi”。我们可能这么写ActionCreator：
var asyncSayActionCreator = function (message) {
setTimeout(function () {
type: 'SAY',
这会报错，因为这个asyncSayActionCreator返回的不是一个action，而是一个function。这个返回值无法被reducer识别。大家可能会想到，这时候需要在action和reducer之间架起一座桥梁……
3.middleware如何工作？
我们看看redux-thunk的代码：
export default function thunkMiddleware({ dispatch, getState }) {
return next =& action =&
typeof action === 'function' ?
action(dispatch, getState) :
next(action);
仅仅是区区的6行代码，以至于我第一次看代码的时候怀疑是不是看错了，但其实它就这么简单。一个三目符，如果action是一个函数，执行这个action函数，如果不是函数，执行next函数。可能大家换是不懂，结合middleware的应用便会一目了然：
const finalCreateStore=applyMiddleware(thunkMiddleware)(createStore)
const store = finalCreateStore(reducer)
这就是我们最常使用middleware的代码。把源码中的next换成createStore，如果action是一个函数（这里的action是改造后的ActionCreator），便会执行这个action(dispatch, getState)函数。
var asyncSayActionCreator = function (message) {
return function (dispatch) {
setTimeout(function () {
dispatch({
type: 'SAY',
这里的action是return的函数：
function (dispatch) {
setTimeout(function () {
dispatch({
type: 'SAY',
如果action返回的不是函数，即返回的是action对象的话，执行createStore函数的dispatch方法。有了middleware之后，数据流动的方向变为：
action ---& dispatcher ---& middleware 1 ---& middleware 2 ---& reducers
4.applyMiddleware都做了什么？
redux2.0对applyMiddleware做了柯里化处理。
import compose from './compose';
export default function applyMiddleware(...middlewares) {
return (next) =& (reducer, initialState) =& {
var store = next(reducer, initialState);
var dispatch = store.
var chain = [];
var middlewareAPI = {
getState: store.getState,
dispatch: (action) =& dispatch(action)
chain = middlewares.map(middleware =& middleware(middlewareAPI));
dispatch = compose(...chain)(store.dispatch);
其实最核心的代码也就是下面两句：
chain = middlewares.map(middleware =& middleware(middlewareAPI));
dispatch = compose(...chain)(store.dispatch);
前一句是执行middlewares数组里的每一个中间件，下一句是将chain柯里化，合成一个函数。
5.自己的middleware怎么写？
学了这些，我们可以自己写一个middleware练练手。首先在项目下建个middlewares的文件夹，新建一个callTraceMiddleware.js来追踪函数的调用过程。在funCallTrace.js添加如下代码：
export default function callTraceMiddleware ({dispatch,getState}){
return next=& action =&{
console.trace();
return next(action);
然后在调用中间件部分添加中间件：
const createStoreWithMiddleware = applyMiddleware(
thunkMiddleware,
loggerMiddleware,
callTraceMiddleware
)(createStore);
这样我们运行在浏览器窗口就可以看到打印的函数调用轨迹。是不是很简单……
redux的middleware是对action进行扩展处理，这样丰富了应用需求。以上是我对redux的个人理解，如发现错误恳请批评指正。
7 收藏&&|&&55
你可能感兴趣的文章
5 收藏，2.3k
14 收藏，2.5k
139 收藏，3.6k
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
太好了 期待更新
太好了 期待更新
请问，我在angular中使用了react,要怎么使用redux，看例子都是在跟节点上使用Provider将store引入到react中，但是在angular 中部分使用react的组件，所有没有根组件，请问解决办法
请问，我在angular中使用了react,要怎么使用redux，看例子都是在跟节点上使用Provider将store引入到react中，但是在angular 中部分使用react的组件，所有没有根组件，请问解决办法
第二块代码返回的不是function吧，是undefined不是吗
第二块代码返回的不是function吧，是undefined不是吗
middleware中return的东西会如何处理？看上去是返回更新的store会有所作用，但是trunk源码看上去返回action(dispath, getstate)返回的是一个Promise。这个Promise会是什么效果？
middleware中return的东西会如何处理？看上去是返回更新的store会有所作用，但是trunk源码看上去返回action(dispath, getstate)返回的是一个Promise。这个Promise会是什么效果？
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。}