redux 的安装
npm install redux --save
redux 有五个js构成,纯函数实现
因为 redux 是纯函数,所以很方便进行测试.在webStorm新建个node环境,安装redux,就可以跑redux的例子.
先看个最简单的使用例子:
/**
* Created by lijie on 16/8/7.
*/// 首先定义一个改变数据的plain函数，成为reducer'use strict';function count (state, action) { var defaultState = { year: 2015,
};
state = state || defaultState; switch (action.type) { case 'add': return { year: state.year + 1
}; case 'sub': return { year: state.year - 1
} default : return state;
}
}// store的创建var createStore = require('redux').createStore;var store = createStore(count);// store里面的数据发生改变时，触发的回调函数store.subscribe(function () { console.log('the year is: ', store.getState().year);
});// action: 触发state改变的唯一方法(按照redux的设计思路)var action1 = { type: 'add' };var action2 = { type: 'add' };var action3 = { type: 'sub' };// 改变store里面的方法store.dispatch(action1); // 'the year is: 2016store.dispatch(action2); // 'the year is: 2017store.dispatch(action3); // 'the year is: 2016运行结果如下:
该例子只用到了一个API: createStore, 先看这个主干 createStore.js
createStore.js
参数
function createStore(reducer, initialState, enhancer) {
...
}reducer 示例中的counter函数,作用是根据action处理state的变化
initialState 初始化的 state 状态树
enhancer 增强函数,需要用applyMiddleware 函数加入自定义的功能.
例如 常用第三方库redux-thunk与redux-logger
subscribe 函数
function subscribe(listener) { if (typeof listener !== 'function') { throw new Error('Expected listener to be a function.');
} var isSubscribed = true;
ensureCanMutateNextListeners();
nextListeners.push(listener); return function unsubscribe() { if (!isSubscribed) { return;
}
isSubscribed = false;
ensureCanMutateNextListeners(); var index = nextListeners.indexOf(listener);
nextListeners.splice(index, 1);
};
}listener 表示观察者函数
nextListeners: 最新的listener 数组
该函数在做的事情: 将之前的listener数组复制给nextListener,并将当前的注册的listener也加入nextListener中
返回的是 清除当前观察者对象的函数 ,该函数就将当前listener从数组中又拿掉了.以后再通过dispatch发送action时,该listener将不会通知该函数了.
dispatch 函数
function dispatch(action) { if (!(0, _isPlainObject2["default"])(action)) { throw new Error('Actions must be plain objects. ' + 'Use custom middleware for async actions.');
} if (typeof action.type === 'undefined') { throw new Error('Actions may not have an undefined "type" property. ' + 'Have you misspelled a constant?');
} if (isDispatching) { throw new Error('Reducers may not dispatch actions.');
} try {
isDispatching = true;
currentState = currentReducer(currentState, action);
} finally {
isDispatching = false;
} var listeners = currentListeners = nextListeners; for (var i = 0; i < listeners.length; i++) {
listeners[i]();
} return action;
}前面一长串方法都是判断发送的Action是否是 对象,actionType是否是 undefined ,是否已经发送过
最关键部分 currentState = currentReducer(currentState, action);
currentReducer 就是初始化赋值给的reducer函数
在dispatch 函数中给到各个reducer进行处理
最后一步 for 循环通知当前所有的观察者
这样的话,示例中所运行的效果就能解释通了.
redux 中间件
redux 库能衍生出丰富的工具集和可拓展的生态系统
为刚才的示例添加一个 监控数据变化的 logger 的中间件
'use strict';const logger = store => next => action => { console.log("pre---"+JSON.stringify(store.getState())); const result = next(action); console.log("end---"+JSON.stringify(store.getState())); return result;
};function count (state, action) { var defaultState = { year: 2015,
};
state = state || defaultState; switch (action.type) { case 'add': return { year: state.year + 1
}; case 'sub': return { year: state.year - 1
} default : return state;
}
}// store的创建var createStore = require('redux').createStore;var applyMiddleware=require('redux').applyMiddleware;const createStoreWithMiddleware = applyMiddleware(logger)(createStore);var store=createStoreWithMiddleware(count,undefined);// store里面的数据发生改变时，触发的回调函数store.subscribe(function () { console.log('the year is: ', store.getState().year);
});// action: 触发state改变的唯一方法(按照redux的设计思路)var action1 = { type: 'add' };// // 改变store里面的方法store.dispatch(action1); // 'the year is: 2016运行结果如下:
实现该功能 主要用到了applyMiddleware.js的API
applyMiddleware.js
function applyMiddleware() { //在这里 找到所有的 第三方中间件 函数
for (var _len = arguments.length, middlewares = Array(_len), _key = 0; _key < _len; _key++) {
middlewares[_key] = arguments[_key];
} return function (createStore) { return function (reducer, initialState, enhancer) { //创建store
var store = createStore(reducer, initialState, enhancer); var _dispatch = store.dispatch; //拿到store的dispatch函数
var chain = []; var middlewareAPI = { getState: store.getState, dispatch: function dispatch(action) { return _dispatch(action);
}
}; //将middlewareAPI 作为第三方中间件 参数,并返回 该所有第三方中间件的函数数组
chain = middlewares.map(function (middleware) { return middleware(middlewareAPI);
}); //从右到左, middleware1( middleware2( middleware3(dispatch) ) )
_dispatch = _compose2["default"].apply(undefined, chain)(store.dispatch); return _extends({}, store, { dispatch: _dispatch
});
};
};
}该段代码的作用: 创建store,将中间件转成数组,将store的state与dispatch给到中间件,并嵌套执行.
在这里面有个compose.js的api使用.官方解释作用是 (...args) => f(g(h(...args))).将数组依次嵌套执行.
compose.js
为了更清楚理解compose.js的作用,我们再添加一个 第三方中间件.
'use strict';const logger = store => next => action => { console.log("pre---"+JSON.stringify(store.getState())); const result = next(action); console.log("end---"+JSON.stringify(store.getState())); return result;
};/**
* 用 { meta: { delay: N } } 来让 action 延迟 N 毫秒。
* 在这个案例中，让 `dispatch` 返回一个取消 timeout 的函数。
*/const timeoutScheduler = store => next => action => { if (!action.meta || !action.meta.delay) { return next(action)
} let timeoutId = setTimeout( () => next(action),
action.meta.delay
) return function cancel() {
clearTimeout(timeoutId)
}
}function count (state, action) { var defaultState = { year: 2015,
};
state = state || defaultState; switch (action.type) { case 'add': return { year: state.year + 1
}; case 'sub': return { year: state.year - 1
} default : return state;
}
}// store的创建var createStore = require('redux').createStore;var applyMiddleware=require('redux').applyMiddleware;const createStoreWithMiddleware = applyMiddleware(logger,timeoutScheduler)(createStore);var store=createStoreWithMiddleware(count,undefined);// store里面的数据发生改变时，触发的回调函数store.subscribe(function () { console.log('the year is: ', store.getState().year);
});// action: 触发state改变的唯一方法(按照redux的设计思路)var action1 = { type: 'add', meta: { delay: 2000 }};// // 改变store里面的方法store.dispatch(action1); // 'the year is: 2016添加的中间件 作用是发送带timeout的action.运行代码,你会发现结果并没有变化,只是listener 得到消息的时间推迟了2000毫秒,但不同的是,logger是实时性的.
所以compose.js让中间件的执行顺序是 timeoutScheduler( logger(dispatch) )的.
把使用的顺序颠倒一下:
const createStoreWithMiddleware = applyMiddleware(timeoutScheduler,logger)(createStore);
将示例的代码改成这样. 你会发现 logger 执行顺序变慢了2000毫秒.
因为现在的执行是: logger( timeoutScheduler(dispatch) )
所以可以得出结论: compose.js 中执行顺序是 数组中排在前面的方法最先执行,执行完毕后将 dispatch函数 传递给后一个执行. 并且在前面执行的中间件将影响其后的中间件.
作者：immutable
链接：https://www.jianshu.com/p/0677c5af4d5c
随时随地看视频
