シンプルなRedux-saga

考えてみてください.もしReduxに基づくプロジェクトを書く必要があるなら、非常に多くのアクション・コンスタントを書く必要があります.
そこで、Contstantsやアクションクリエーターを減らすためのライブラリredux-actが登場しました.
しかし、Reduxだけが私たちのビジネスニーズを完全に満たすことはできません.結局、SPAプロジェクトではいつもサービスからデータを取得する必要があります.そこで、Redux-sagaに統合します.
Redux-sagaは非同期のイベントをうまく処理してくれます.しかし同じように、Redux-sagaはたくさんのアクションクリエーターを書いて、Takeタイプを指定して、Redux-Seagaの入り口に統合しなければなりません.これらのアクションクリエーターとeffectはパラメータをいちいち対応させるだけではなく、統一したイベントの処理にも不便です.
そこでサガ-actionn-creatorが誕生しました.
Saga-actionn-creatorの特性

煩雑な書き回しを減らすアクションクリエーター

直感的なパラメータ伝達

サポートプラグイン

はRedux-sagaの全ての特性を保持しています.

優秀なTypeescriptは

をサポートします.

より便利な試験

どう使いますか
Saga-actionn-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 {
    yield call(getUserInfo, id);
  },
  //   ，         Effect  take   
  //          ，   takeType  
  updateUser: {
    takeType: takeLatest,
    *effect(id: string, name: string): Generator {
      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;

export default store;

これで、saga-actionn-creatorの接続動作は全部終わりました.
あとは、いつもactionを使うようにクリエーターを使ってあなたのために導き出すアクションクリエーターだけが必要です.

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をコアフレームとして使用しています.もしあなたが1年以上前の開発の仕事を持っていたら、React.jsをよく知っていて、各種の最新技術を熱愛しています.コードに対して要求があります.履歴書をください[email protected]