なぜoopでredux業務を書くの?

悩み
ということで、筆者は入門したばかりの頃からreduxを書くのがつらいと思っていました.actionを書き、typesを書き、reducerを書き、actionとreducerにtypeを注入し、reduxを書き終わると5分で終わるかもしれません.でも仕方がないようです.

const prepare = 'profile_prepare';
const success = 'profile_success';
const fail = 'profile_fail';

const getProfile = (id) => {
  return {
    [CALL_API]: {
      uri: `/profile/${id}`,
      method: 'GET',
      types: [prepare, success, fail],
    }
  };
};

const reducer = (state = {}, action) => {
    switch (action.type) {
      case prepare:
          return {
            ...state,
            loading: true,
          };
          break;
      case success:
          return {
            ...state,
            loading: false,
            action.response,
          };
          break;
      case fail:
          return {
            ...state,
            loading: false,
          };
    }
};

このコードは各actionとreducerにあふれている.実際のプロジェクトでは、このdemoよりも複雑になる可能性があります.
ばくはつ
2018年、筆者はプロジェクトでtypescriptを使ってみましたが、reduxというブロックのコード量が2倍に増えたという問題が見つかりました.どうして?タイプを書くから、reducerのタイプ、actionのタイプ、いろいろなタイプを定義しなければなりません.品物が多くなると、reducerファイル全体が目に入らない.そこで私はビジネスに関係のないコードを全部抽出するかどうか考えました.やると言ったらすぐやる
改革する
数ヶ月の研磨を経て、やっとコードを引き出した.はい、オブジェクト向けの方法で.プロジェクトアドレス:redux-model-ts
そう言えば、コードが50%減ったので、typeを書く必要はありません.tsを使うと100%のコードヒントがあります.

import { Model } from 'redux-model-ts';

interface Response {
  name: string;
  age: number;
}

type Data = Partial;

class Profile extends Model {
  manage = this.actionRequest({
    action: () => {
      return this.get('/api/profile');
    },
    onSuccess: (state, action) => {
      return {
        ...state,
        ...action.response,
      };
    },
    meta: true,
  });

  protected initReducer(): Data {
    return {};
  }
}

export const profile = new Profile();

このコードにはどのような情報が含まれていますか?

死角のない静的コードプロンプト

はaction

を定義する

はreducer

を定義した.

loading判定(profile.manage.useLoading()付き)

actionの下でreducer更新を持参し、case

を書く必要はありません.

1 1つのモデルは複数のaction

を同時に書くことができる

typeは内蔵されており、

に自動的に対応しています.

typeはインタフェースを介して(profile.manage.getSuccessType()

に取り出すことができる.
はい、数行のコードでデータストレージのセットが完了しました.重複するコードを書かないで、同時に100%のヒントがあって、いったんreducerの操作に間違いがあったら、すぐに間違いを報告します.
そうですね.これはソフト文で、自分で書いたライブラリをお勧めします.redux-model-tsへようこそ