redux中的异步

2019年8月24日 172次阅读 来源: shiyangzhaoa

关于异步

无论是前端开辟照样后端的nodejs，异步基本上老是中心。我地点的公司是做大数据处理的，常常须要从背景拿取大批的数据，致使全部要求会比较耗时。以下一个场景：
《redux中的异步》
我挑选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中的异步》
官方文档上的申明。我不会，我不知道，再会?…
没用过，就不做议论了。

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中的异步》
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中的异步》

redux-saga另有其他许多功用，如同时实行多个使命等，更多的内容发起看官方的文档。

其他的异步体式格局

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

总结

异步流一向是比较烦人的点，在redux中也是。综合运用的来看，引荐用redux-saga或许redux-observable(假如熟习Rxjs的话)。

    原文作者：shiyangzhaoa
    原文地址: https://segmentfault.com/a/1190000014072222
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞