想一下，如果你需要写一个基于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步

一、定义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;

二、创建连接器并合并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;

三、将插件与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开源协议

源码地址：https://github.com/Justinidle...

写在最后

我们在招人????

我们是谁？

AfterShip 2012 年成立于香港，公司自2014年起已实现持续盈利，且每年 100% 增长，公司目前暂时不需要融资。业务遍布全球，与全球 500 多家物流公司达成合作，涉及 30 多种主流语言业务体系。客户有 Amazon, Wish, eBay, Paypal, Groupon, Etsy,及各大小电商超过 100,000 家。

我们位于深圳南山互联网最繁华的地带。

关于岗位

我们前端全面使用React.js作为核心框架。如果你有一年以上的前端开发工作，熟悉React.js，热爱各种最新技术，对代码有要求，欢迎给我你的简历：qc.zhu@aftership.com