Attack on Life ⚔️

redux-thunk是redux解决异步的中间件。

举个例子，我们需要fetchUser拿到用户信息，然后存到redux中。如果没有thunk，我们需要在组件中fetchUser.then，然后dispatch一个action存到redux中，假如这个操作有多处需要，那么fetchUser.then这个就需要重复，存在一定的代码重复。thunk加入的话，我们可以把fetchUser.then(dispatch action)整体作为一个action进行复用。因为thunk改写了dispatchAPI，我们还是dispatch去用而已，但是已经不是个pure action了。

thunk引入

先看下项目中如何配置thunk。

1
2
3

const middleWares = [sagaMiddleware, thunk, routerMiddleware(history)];
const store = createStore(rootReducer(history), compose(applyMiddleware(...middleWares), reduxDevtools));

单页应用带来更流畅的前端体验，同时也带来了一些麻烦，比如SEO，又比如日益严重的体积问题。当然办法总比困难多，tree shaking便是优化体积问题的办法之一

概念

tree shaking，它是什么

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export. The name and concept have been popularized by the ES2015 module bundler rollup.

The webpack 2 release came with built-in support for ES2015 modules (alias harmony modules) as well as unused module export detection. The new webpack 4 release expands on this capability with a way to provide hints to the compiler via the “sideEffects” package.json property to denote which files in your project are “pure” and therefore safe to prune if unused.

关键点

之前梳理过，自己常用的APP，常用的硬件。这次梳理下Chrome日常使用的插件，并且分享点自己的使用心得。

对于我所使用的插件，大致可以分为两类。

持续更新

日常使用

上篇文章简单介绍了Jest配置,通过简单的配置达到可以跑测试。这篇文章聚焦如何进行React项目的测试，侧重点有所不同。

项目技术栈

因为是个通用UI组件库，所以不牵扯redux,api等。整体技术栈较简单

• React
• TypeScript
• Antd
• Less
• react-intl

测试目标

最近在做公司级UI组件库，对于测试这块，决定继续沿用Jest。因为追求简单，果断舍弃拷贝粘贴这个捷径，从零开始进行配置。这里Mark下。

上概念

玩之前，先了解下Jest是干嘛的

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!