簡化Redux-saga

想一下，若是你須要寫一個基於Redux 的項目，你須要重複的寫很是多的Action Constants，很是多的Action Creator以作至關大一部分差很少相同的事情。

因而出現了爲了幫你減小書寫重複Constants及Action Creator 的庫redux-act。

但只有Redux並不能徹底知足咱們的業務需求，畢竟SPA項目中老是須要從服務端獲取數據的，因而這時候咱們整合進來Redux-saga。

Redux-saga能很是好的幫助咱們處理異步事件，可是一樣的，Redux-saga須要書寫許多的Action Creator並指定其Take類型再合併到Redux-Saga的入口處，並且這些Action Creator及effect非但須要一一讓參數對應，還不方便作統一的事件處理。

因而Saga-action-creator誕生了。

Saga-action-creator的特性

• 減小重複繁瑣的書寫Action creator
• 直觀的參數傳遞
• 支持插件
• 保留了Redux-saga的全部特性
• 優秀的Typescript支持
• 更方便的測試

如何使用

使用Saga-action-creator的方法很是簡單，只需3步

1、定義Saga effects並導出

import createSagaActions from 'saga-action-creator';
import { takeLatest, call } from 'redux-saga/effects';
import { getUserInfo, updateUser } from '../services/user';

const user = createSagaActions({
  // 通常狀況下，你能夠直接寫一個Effect
  *getUserById(id: string): Generator<any, any, any> {
    yield call(getUserInfo, id);
  },
  // 固然，若是你須要爲某一個Effect指定take的類型
  // 你能夠傳遞一個對象，並指定takeType屬性
  updateUser: {
    takeType: takeLatest,
    *effect(id: string, name: string): Generator<any, any, any> {
      yield call(updateUser, id, { name });
    },
  },
});

export default user;
複製代碼

2、建立鏈接器併合並Creators

import { createConnection, getLoadingPlugin } from 'saga-action-creator';
import user from './user';
import { takeLatest } from 'redux-saga/effects';

const creator = createConnection({
  // 合併creator
  creators: {
    user,
  },
  // 默認狀況下effect的take類型爲 `takeEvery`
  // 若是你須要修改默認的類型能夠傳遞這個參數
  defaultTakeType: takeLatest,
  // 添加插件
  plugins: {
    // 這裏插件的key將做爲後面getReducers的導出的key，則爲store名
    loading: getLoadingPlugin(),
  },
});

export default creator;
複製代碼

3、將插件與Redux及Redux-saga進行鏈接

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { all } from 'redux-saga/effects';
import createSagaMiddleware from 'redux-saga';
import creator from '../sagas';

// 將插件導出的reducers與store鏈接
const reducers = combineReducers({
  ...creator.getReducers(),
});

const sagaMiddleware = createSagaMiddleware();

// 將Effects與Redux-saga鏈接
sagaMiddleware.run(function*() {
  yield all(creator.getEffects());
});

const store = createStore(reducers, applyMiddleware(sagaMiddleware));

export type AppState = ReturnType<typeof reducers>;

export default store;
複製代碼

至此，saga-action-creator的鏈接動做就所有作完了。

剩下的，你就只須要像平時使用action同樣使用creator爲你導出的Action Creator了。

import { connect } from 'react-redux';
import { AppState } from '../store';
import userActions from '../sagaActions/user';
import UserList from './UserList';

const mapStateToProps = (state: AppState) => ({
  loading: state.loading.user.getUserById,
});

const mapDispatchToProps = {
  getUserById: userActions.actions.getUserById,
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(UserList);
複製代碼

總結

整個庫很是的精簡，旨在爲你解決核心痛點。簡化Redux-saga的書寫，並保留其全部優勢。

與歷史項目整合也很是簡單，不須要作過多的修改，使你能夠漸進地優化你的項目。

該庫使用嚴謹的Ts類型開發，並進行自動類型推導，使你能夠徹底體會到Ts帶來的開發樂趣。

該庫支持插件，能夠在全部的Effect先後執行所需的操做（這裏開發的loading插件靈感源自rematch，十分感謝）。

關於該庫

該庫開源並遵循MIT開源協議

源碼地址：github.com/Justinidler…

寫在最後

咱們在招人😎

咱們是誰？

AfterShip 2012 年成立於香港，公司自2014年起已實現持續盈利，且每一年 100% 增加，公司目前暫時不須要融資。業務遍及全球，與全球 500 多家物流公司達成合做，涉及 30 多種主流語言業務體系。客戶有 Amazon, Wish, eBay, Paypal, Groupon, Etsy,及各大小電商超過 100,000 家。

咱們位於深圳南山互聯網最繁華的地帶。

關於崗位

咱們前端全面使用React.js做爲核心框架。若是你有一年以上的前端開發工做，熟悉React.js，熱愛各類最新技術，對代碼有要求，歡迎給我你的簡歷：qc.zhu@aftership.com