Redux & Middlewares

[xgqfrms-GitHub]

Redux & Middlewares

applyMiddleware

Middleware is the suggested way to extend Redux with custom functionality.

http://redux.js.org/docs/Glossary.html#middleware

http://redux.js.org/docs/Glossary.html#async-action

https://github.com/gaearon/redux-thunk

http://redux.js.org/docs/api/applyMiddleware.html

redux-devtools-extension

https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

import {createStore, applyMiddleware, compose} from 'redux';

/* eslint-disable no-underscore-dangle */
/* 
let store = createStore(
    todoApp,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

*/

// middleware

const middleware = {};

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(todoApp, composeEnhancers(
    applyMiddleware(...middleware)
));
/* eslint-enable */

ES6 spread & ...rest

https://github.com/tc39/proposal-object-rest-spread

Array, Object, Function

https://github.com/tc39/proposal-object-rest-spread#rest-properties

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

x; 
// 1
y;
// 2
z; 
// { a: 3, b: 4 }

https://github.com/tc39/proposal-object-rest-spread#spread-properties

let n = { x, y, ...z };

n; 
// { x: 1, y: 2, a: 3, b: 4 }

how to get function params ???

function ...spread params, ...rest can only using Array Methods!

[xgqfrms-GitHub]

Rest

https://github.com/tc39/proposal-object-rest-spread/blob/master/Rest.md

Spread

https://github.com/tc39/proposal-object-rest-spread/blob/master/Spread.md

---

ES6 ...Rest & ...Spread

===

ES5 Object.assign() 语法糖！

---

Shallow Clone (excluding prototype)

let aClone = { ...a };

Desugars into: 脱糖???

let aClone = Object.assign({}, a);

https://translate.google.com/?source=gtx_c#en/zh-CN/De%20sugars

Merging Two Objects

let ab = { ...a, ...b };

Desugars into: 脱糖???

let ab = Object.assign({}, a, b);

Overriding Properties

let aWithOverrides = { ...a, x: 1, y: 2 };
// equivalent to

let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };
// equivalent to

let x = 1, y = 2, aWithOverrides = { ...a, x, y };

Desugars into: 脱糖???

let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 });

[xgqfrms-GitHub]

MDN

mdn rest spread

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters

 ...rest 必须是参数列表的最后一个参数！

 ...spread 无限制!

剩余参数（rest parameter）语法允许我们将一个不定数量的参数表示为一个数组。

// rest parameter === `数组`
function(a, b, ...restArgs) {
  // ...
}

剩余参数和 arguments 对象的区别

剩余参数和 arguments 对象之间的区别主要有三个：

1. 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。

2. arguments 对象不是一个真实的数组, 而剩余参数是真实的 Array实例也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach，pop。

3. arguments 对象对象还有一些附加的属性 (比如callee属性)。

[xgqfrms-GitHub]

function ...spread params,...rest can only using Array Methods!

// ...rest === array methods

const sortRestArgs = (...rest) => {
    let sortedRest = rest.sort();
    return sortedRest;
};

let test = sortRestArgs(5,3,7,1);
test;
// (4) [1, 3, 5, 7]

rest.map()

// Array.map()

const multiply = (multiplier, ...rest) =>{
    return rest.map(
        (element) => {
            return multiplier * element;
        }
    );
};

let restMap = multiply(2, 1, 2, 3); 
const console_color = `
    color: rgba(0, 255, 0, 0.7);
    font-size: 23px;
    backgroud: #000;
`;
console.log(`%c restMap`, console_color, restMap);
// [2, 4, 6]

[xgqfrms-GitHub]

Destructuring_assignment

解构赋值语法是一个 Javascript 表达式，这使得可以将值从数组或属性从对象提取到不同的变量中

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

object & ...rest 解构赋值

// Stage 3 proposal​​​​​​​
/* object & ...rest 解构赋值 */

({a, b, ...rest} = {a:1, b:2, c:3, d:4});
// {a: 1, b: 2, c: 3, d: 4}

rest;
// {c: 3, d: 4}