我试图将我的头脑包裹在一些反应中常见的箭头函数和它的工具上.
给出以下示例:
export default function applyMiddleware(...middlewares) { return (createStore) => (reducer,preloadedState,enhancer) => { // snip actual enhancer logic return { ...store,dispatch } } }
用语言描述上述内容:
>我们的导出函数(applyMiddleware)采用带有spread的数组参数.
>然后applyMiddleware返回一个带有createStore参数的无名函数,该参数这次返回另一个无名函数,带有三个参数.
所以没有箭头,它看起来像这样:
export default function applyMiddleware(...middlewares) { return function(createStore){ return function(reducer,enhancer){ //some logic return{...store,dispatch} } } }
我的问题:
>我说错了吗?
>我们在这里看到的常见用例/代码范例是什么?
解决方法
你的第一个问题的答案或多或少(见我的评论).第二个问题的答案是你看到的模式是使用
closure和
currying的组合.导出函数的原始参数被收集到一个名为“中间件”的数组中,返回的函数关闭(即可以访问).然后可以使用另一个参数’createStore’再次调用该函数,然后返回另一个可以接受更多参数的函数.这允许人们部分地应用参数.对于一个更简单(也许更容易理解)的例子,让我们采用一个名为’add’的函数来添加两个数字:
let add = (x,y) => x + y;
不是很有趣.但是让我们分解它以便它可以获取第一个数字并返回一个接受第二个数字的函数:
let add = x => y => x + y; let add3 = add(3); let seven = add3(4); // 7
对于我们的添加功能来说,这似乎不是一个大赢家,但是你从一个更合理的现实世界的例子开始.此外,不是手动调度,而是可以(并且可取)使用咖喱功能为您完成,许多流行的库(lodash,下划线,ramda)为您实现咖喱.使用Ramda的一个例子:
let add = R.curry((x,y) => x + y); let add3 = add(3); let five = add3(2); let also5 = add(3,2); let still5 = add(3)(2); // all are equivalent.