redux中的异步

关于异步

无论是前端开发还是后端的nodejs，异步基本上总是核心。我所在的公司是做大数据处理的，经常需要从后台拿取大量的数据，导致整个请求会比较耗时。如下一个场景：

我选择A应用，点击搜索，这时候我马上去选择应用B,点击搜索，可能的情况是，A的数据量比B的数据量大，导致A的结果是你最后获取到的，这是就会出现这样的问题：此时用户的搜索条件是B，但你展示的结果确是A。代码是类似这样的：

const request = (api, time) => {
  return new Promise(resolve => {
    setTimeout(() => resolve(`data ${api}!`), time);
  })
};

const requestA = () => request('A', 4000);
const requestB = () => request('B', 2000);

let result;
requestA().then(data => {
  result = data;
});
// 接着
requestB().then(data => {
  result = data;
});
// 4秒后打印result
console.log(result);
// 打印出 'data A!'

实际工作中，比较简单的方式大概就是，在请求A的时候给查询按钮设置成disabled，请求返回后再去放开按钮，去请求B。但是体验可能会不太好，比如用户搜了A，A的搜索条件比较广，导致用户一直等到timeout的情况才能去继续查询。
我们可以用闭包去解决这个问题：

let _id = 0;
let _req_id = 0;
const request = (api, time) => {
  _id++;
  return new Promise(resolve => {
    setTimeout(() => resolve(`data ${api}!`), time);
  })
};

const requestA = () => request('A', 4000);
const requestB = () => request('B', 2000);

let result;
void function(id) {
  requestA().then(data => {
    if (id === _id) {
      result = data;
    }
  });
}(++_req_id);
// 接着
void function(id) {
  requestB().then(data => {
    if (id === _id) {
      result = data;
    }
  });
}(++_req_id);
// 4秒后打印result
console.log(result);
// 打印出 'data B!'

我在angular1.5中碰到这种问题一般都是这样解决的。
（以后面试官问你闭包都有啥用的时候可以举这个栗子，比那些星期一吃包子，星期二吃馒头的栗子好多了2333）

const plan = day => food => console.log(`${day}吃${food}`);
const SundayPlan = plan('星期天');
SundayPlan('包子');
SundayPlan('馒头');

redux中的异步

用过react的人对redux一般多少都有一定了解，毕竟是作为react社区最热门的状态管理框架，相信不少人也是用过。redux并不能开箱即用，在异步上还需要依赖社区的第三方库。

redux-thunk

出自redux的作者Dan，相信这个不少人都使用，相对于其他方案，使用起来比较简单。对于不太复杂的场景使用起来还是很方便的。使用起来就像下面的样子：

const GET_TOPICS_REQUEST = 'GET_TOPICS_REQUEST',
  GET_TOPICS_SUCCESS = 'GET_TOPICS_SUCCESS',
  GET_TOPICS_FAILED = 'GET_TOPICS_FAILED';
export const getTopics = (query = defaultQuery) => (dispatch) => {
  dispatch({
    type: GET_TOPICS_REQUEST,
    isPending: true,
  });
  axios.get('').then(() => {
    dispatch({
      type: GET_TOPICS_SUCCESS,
      isPending: false,
    });
  }).catch(err => {
    dispatch({
      type: GET_TOPICS_FAILED,
      isPending: false,
    });
  });
}

使用起来相当简单，但其中会出现像我们刚开始提到的问题，action是没法取消的。打个比方，我先请求A，然后立刻请求B，是相同的action，B的数据先返回，A的数据后返回，最后state更新的数据就变成了A。可行的解决方式是 redux-thunk + async/await。但async/await这玩意用在前端，现在不是很推荐。

redux-observable

基于Rxjs。

官方文档上的说明。我不会，我不知道，再见?...
没用过，就不做讨论了。

redux-saga

在官网上看了一下，没错，这就是我想要的。
文档：中文，官方。
需要注意的是，中文的文档已经落后官方文档了，看的话推荐官方文档，我这种英语渣是结合起来看的。如果你的英语够好，可以作出一些贡献，传送门。
最简单的方式，实现一个redux-logger：

// StoreConfig
import { createStore, compose, applyMiddleware } from 'redux';
import createSagaMiddleware, { END } from 'redux-saga';
import { xx } from '../reducers';

const StoreConfig = (initialState) => {
  const sagaMiddleware = createSagaMiddleware();

  const store = createStore(
    xx,
    initialState,
    compose(
      applyMiddleware(sagaMiddleware),
      window['devToolsExtension'] ? window['devToolsExtension']() : f => f,
    ),
  );
  store.runSaga = sagaMiddleware.run;
  store.close = () => store.dispatch(END);

  return store;
};

export default StoreConfig;

启动redux-saga：

import rootSaga from './sagas';
import StoreConfig from './store/index';

const store = StoreConfig(initialState);
store.runSaga(rootSaga);

saga/index.js:

import { take, all, fork, select } from 'redux-saga/effects';
import { api } from '../services';

function* watchAndLog() {
  while (true) {
    const action = yield take('*');
    const getState = yield select(state => state);
    console.log('%caction---', 'color: green;', action);
    console.log('%cstate after---', 'color: green;', getState);
  }
}

export default function* root() {
  yield all([
    fork(watchAndLog),
  ]);
}

redux-logger的效果。

redux-saga的优点：

1. 对异步流优秀的控制，对于文中一开始提到的问题，我们有更好的解决方式。文档中给了解决方案。

   如果我们只想得到最新那个请求的响应（例如，始终显示最新版本的数据）。我们可以使用 takeLatest辅助函数。

     import { takeLatest } from 'redux-saga'
   
     fetchData () {
       // ...
     }
   
     function* watchFetchData() {
       yield* takeLatest('FETCH_REQUESTED', fetchData)
     }

   在任何时刻 takeLatest 只允许执行一个 fetchData 任务。并且这个任务是最后被启动的那个。 如果之前已经有一个任务在执行，那之前的这个任务会自动被取消。

2. 无阻塞的调用，可以fork一个独立的“线程”，并可以通过cancel取消。如登陆，在登陆未完成时点击登出，将登陆的线程取消：

   function* authorize(username, password) {
     try {
       const { token } = yield call(api.userLogin, { username, password });
       yield put({type: LOGIN_SUCCESS, isLoginPending: false, token });
       localStorage.setItem('SAGA-TOKEN', token);
     } catch (error) {
       yield put({type: LOGIN_FAILURE, isLoginPending: false, error});
     } finally {
       if (yield cancelled()) {
         console.log('%cwow, killed the task!', 'color: red;');
       }
     }
   }
   
   function* loginFlow() {
     while (true) {
       const { username, password } = yield take(LOGIN_REQUEST);
       const task = yield fork(authorize, username, password);
       const action = yield take([LOGIN_OUT, LOGIN_FAILURE]);
       if (action.type === LOGIN_OUT) {
         localStorage.removeItem('SAGA-TOKEN');
         yield cancel(task);
       }
     }
   }

   点击登陆，未完成请求时，立即点击登出，状态变化停留在登出：
   

redux-saga还有其他很多功能，如同时执行多个任务等，更多的内容建议看官方的文档。

其他的异步方式

如redux-promise、redux-promise-middleware这些，不是很推荐。

总结

异步流一直是比较烦人的点，在redux中也是。综合使用的来看，推荐用redux-saga或者redux-observable(如果熟悉Rxjs的话)。