简化Redux-saga

2024年2月1日 452次阅读 来源: idler_z

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

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