redux-thunk和弹性布局和display

redux-thunk源码
function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;
redux-thunk的源码非常简洁，出去空格一共只有11行，这11行中如果不算上},则只有8行。最后三行模块的导出方法很好理解，

// thunk的内容如下
({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  }

// thunk.withExtraArgument的结果如下
function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}
thunk.withExtraArgument允许给返回的函数传入额外的参数，它比较难理解的部分和thunk一样，如下：

({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  }
上述代码使用函数参数的解构加上连用三个箭头函数，显得非常简洁，单同时也带来了理解的困难（这也是箭头函数的缺点之一）。把上述代码在babel REPL中转译为ES5语法后，我们看到以下结果：

"use strict";

function createThunkMiddleware(extraArgument) {
  return function (_ref) {
    var dispatch = _ref.dispatch,
        getState = _ref.getState;
    return function (next) {
      return function (action) {
        if (typeof action === "function") {
          return action(dispatch, getState, extraArgument);
        }
        return next();
      };
    };
  };
}
这下，代码一下子我们能看懂了，不过稍等这里的dispatch,getState，next还有action又是什么？

我们先看看，在reudx中我们如何使用中间件：

let store = createStore(
    reducer,
    applyMiddleware(thunk)
);
看来，要解开dispatch,getState,next,action从哪里来，我们还需要再看看applyMiddleware的源码，如下：

export default function applyMiddleware(...middlewares) {
  return (createStore) => (...args) => {
    const store = createStore(...args)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}
可以看出其中middleware执行时传入的参数对象middlewareAPI中确实包含getState和dispatch两项，next则来自dispatch = compose(...chain)(store.dispatch)这一句中的store.dispatch,而action在dispatch某个action时传入。

一般来说一个有效携带数据的action是如下这样的：

{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}
加入redux-thunk后，action可以是函数了，依据redux-thunk的源码，我们可以看出如果传入的action是函数，则返回这个函数的调用，如果本身传入的函数是一个异步函数，我们完全可以在函数调用结束后，获取必要的数据再次触发dispatch由此实现异步效果。

弹性布局（父级上定义）
1、设置了弹性布局之后，子元素的CSS中的float、clear、vertial-align这些属性失效。
2、可以改变子元素的排列顺序。
3、弹性布局的换行，flex-wrap：wrap；
4、方向布局： justify-content
5、order属性：定义项目的排列顺序。
6、如果空间不够，会被挤压，所以可以换行处理。
7、位置关系，justify-content，水平方向布局。
8、align-item，垂直方向布局。
9、align-content和glign-item的区别，以整体为内容。

块级元素和行内元素
1、块级元素，常见的有div、p、form、ul、ol、li、h1-h6
块级元素会独占一行，可以设置width和height，设置了宽度之后也还是独占一行，可以设置margin和padding属性

2、行内元素，常见的有a、span、img、input、button、select
行内元素不会独占一行，相邻行内元素可以排在同一行，设置width和height无效，行内元素只能设置水平方向的margin和padding

3、inline-block，可以让元素具有块级和行内元素的特性，既可以设置长度，可以让padding和margin生效，又可以和其它行内元素并排