2017年1月

关于 Redux 中间件

Redux 的中间件是定义一个函数,对 dispatch 进行改造,在发出 action 与执行 reducer 之间添加其他功能,这是对 Redux 进行功能拓展的方式。

Redux 如何支持中间件?

applyMiddlewares()

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer);
    var dispatch = store.dispatch;
    var chain = [];
    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    };
    chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);
    return {...store, dispatch}
  }
}

middleware => middleware(middlewareAPI)

每个 middleware 将能访问 getStatedispatch,同时可以知道该 middleware 为高阶函数,执行返回一个函数

compose()

dispatch = compose(...chain)(store.dispatch);

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  const last = funcs[funcs.length - 1]
  const rest = funcs.slice(0, -1)
  return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
}

(composed, f) => f(composed)
即:
middleware({getState, dispatch})(store.dispatch)
该函数为高阶函数,执行返回一个函数

分析至此,一个 middleware 函数大致为:

({getState, dispatch})=> (next) => (action) => {
    // next 即 store.dispatch
    //...在此拓展功能
    action() // action, 这个action执行触发dispath??
 } 

Action 如何与Dispatch联系起来?

action 通过 bindActionCreatordispatch 联系起来

bindActionCreator()

function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args))
}

(...args) => dispatch(actionCreator(...args))

actionCreator 可以知道 actionCreator 为高阶函数,执行返回一个函数

所以一个 action 的姿势应该为:

()=> () => {
   type: "",
   payload
}

举例:redux-thunk 中间件

源码:

function thunkMiddleware({ dispatch, getState }) {
  return next => action =>
    typeof action === 'function' ?
      action(dispatch, getState) :
      next(action);
}

action 怎么写?

funciton fetchSomething(){
    return (dispatch, getState)=>{
        fetch().then((res)=>{  
            disatch({
                type: "FETCH_SOMETHING_DONE"
                palyload
            })
        })
    }
}

参考:

Redux Middleware Doc

关于 FormData

介绍

先看看 MDN 对FormData的介绍:

XMLHttpRequest Level2添加了一个新的接口FormData. 利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

特点就是,增加了ajax对二进制文件上传的支持。比如:

var formData = new FormData();
formData.append("username", "sam");
// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like object
var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request = new XMLHttpRequest();
request.open("POST", url);
request.send(formData);

这个例子既有File,还有Blob 类型文件,利用FormData 能轻松的进行异步上传。

请求头部

request_header

可以看到 Content-Type 为:

multipart/form-data; boundary=----WebKitFormBoundary2KZkAN7R3gSDjBJz

图中没有看到 file 的二进制文件

请求主体

request_body_head
request_body_tail

每个参数包括:

  1. 第一行,“分界线”,图中chrome的分界线是:“——WebKitFormBoundary”加16位随机Base64位编码的字符串作为分隔边界
  2. 第二行,内容配置,指明form-data,和name键名称
  3. 第三行,指明content-type
  4. 第三行或第四行,空行

注意,整个body结束最后,多了一个分界线

分析一下请求信息,发现这种提交方式与form表单提交是一样的,比如:

<form enctype="multipart/form-data" method="post" action="">
    <input name="username" value="sam1">username</input>
    <button type="submit">提交</button>
</form>

兼容性

form_data_compatibility

由图可见,FormData 在移动端,对低版本的 Android 设备支持不够友好。

我们知道,在ajax请求中,send函数会自动生成请求头和请求主体。所以,send(formData)浏览器会自动生成上图中的请求。在浏览器不支持FormData的情况下,我们可以通过拼接multipart/form-data请求,来达到目的。

动手实现了一个:https://github.com/henryluki/FormData

参考

FormData
The Multipart Content-Type
XMLHttpRequest Standard
Returning Values from Forms: multipart/form-data