React Nativeプロジェクトフレームワークの構築経験

const HomeContext = createContext<IContext>({
  状態: デフォルト状態、
  ディスパッチ: () => {}
});
const ContextProvider = ({ urlQuery, pageCode }: IProps) => {
  const initState = getInitState(urlQuery, pageCode);
  const [状態、ディスパッチ]: [IHomeState、IDispatch] = useReducer(homeReducer、initState);

  戻る （
    <HomeContext.Provider 値 = {{ 状態、ディスパッチ }}>
      <ホームコンテナ />
    </ホームコンテキスト.プロバイダー>
  );
};

const ホームコンテナ = () => {
const { ディスパッチ、状態 } = useContext(HomeContext);
...

|-ページ1
    |-handler // ロジックを処理するための純粋な関数。UT でカバーする必要があります|-container // データ、動作、コンポーネントを統合します|-component // 純粋な UI コンポーネント。コンテンツとユーザー インタラクションを表示しますが、ビジネス ロジックは処理しません|-store // データ構造は 3 層を超えることはできません。また、外部参照と冗長フィールドによってレベルを減らすことができます|-reducer // immer を使用して新しいデータ (不変データ) を返します
    |-...
|-ページ2
|-...

// ディスパッチを2回実行したり、単一フィールドの更新ケースを過度に定義したりしないようにする
// このロジックを統合すると、ページ上の動作に関連付けられ、理解と読み取りに役立ちます。ケース EFHListAction.updateSpecifyQueryMessage:
    リターンproduce(state, (draft: IFHListState) => {
        draft.specifyQueryMessage = ペイロードを文字列として;
        ドラフト.showSpecifyQueryMessage = true;
    });    
ケース EFHListAction.updateShowSpecifyQueryMessage:
    リターンproduce(state, (draft: IFHListState) => {
        draft.showSpecifyQueryMessage = ペイロードをブール値として;
    });

エクスポート関数 getFilterAndSortResult(
  フライトリスト: IFlightInfo[],
  フィルターリスト: IFilterItem[],
  フィルターシェア: ブール値、
  filterOnlyDirect: ブール値、
  ソートタイプ: EFlightSortType
）{
  if (!isValidArray(フライトリスト)) {
    戻る [];
  }

  ソート関数は、sortType を引数として受け取ります。
  const result = FlightList.filter(v => doFilter(v, filterList, filterShare, 1, filterOnlyDirect)).sort(sortFn);

  結果を返します。
}

記述(getFilterAndSortResult.name, () => {
  テスト('getFilterAndSortResult', () => {
    getFilterAndSortResult(flightList, filterList, false, EFlightSortType.PriceAsc)).toEqual(filterSortResult) を期待します。
  });
});

定数OWFlightListContainer = () => {
    // コンテキストを通じてデータを取得します。const { state, dispatch } = useContext(OWFlightListContext);
    ...

    // 初期読み込み中のタイムアウトのカウントダウン useOnce(overTimeCountDown);
    ...
    
    // ユーザーがソートをクリックする const onPressSort = (lastSortType: EFlightSortType, isTimeSort: boolean) => {
        // ハンドラー内の getNextSortType 関数を参照します。const sortType = getNextSortType(lastSortType, isTimeSort);
        ディスパッチ({ タイプ: EOWFlightListAction.updateSortType、 ペイロード: sortType });
        
        // ポイント埋め込み操作 logSort(state, sortType);
    };
    
    // 表示コンポーネントのレンダリング return <.../>;
}

/**
 * オブジェクトパスに基づいて値を取得します* @param target {a: { b: { c: [1] } } }
 * @param パス 'abc0'
 */
エクスポート関数 getVal(ターゲット: 任意、パス: 文字列、デフォルト値: 任意 = 未定義) {
  ret = ターゲットとします。
  キー: 文字列 | undefined = '';
  pathList を分割します。

  する {
    キー = pathList.shift();
    if (ret && key !== undefined && typeof ret === 'object' && key in ret) {
      ret = ret[キー];
    } それ以外 {
      ret = 未定義;
    }
  } while (pathList.length && ret !== undefined);

  ret === undefined || ret === null ? defaultValue : ret を返します。
}

//デモ
const errorCode = getVal(結果、'rstlist.0.type'、0);

// 外部と接続する場合、いくつかの固定構造とスケーラブルなデータリストが定義されることがよくあります。 // このような契約に適応し、読みやすさとメンテナンス性を向上させるために、次の関数がまとめられています。 export const GLOBAL_NOTE_CONFIG = {
  2: 「払い戻し」、
  3: 'ソートタイプ'、
  4: '機能スイッチ'
};

/**
 * 設定に従って、attrListの値を取得し、jsonオブジェクト型のデータを返します * @private
 * 詳細サービスの@member
 */
エクスポート関数 getNoteValue<T>(
  noteList: Array<T> | 未定義 | null、
  設定: { [_: 文字列]: 文字列 },
  キー名: 文字列 = 'type'
）{
  const ret: { [_: 文字列]: T | Array<T> } = {};

  if (!isValidArray(noteList!)) {
    ret を返します。
  }

  //@ts-無視
  noteList.forEach((note: 任意) => {
    const typeStr: string = (('' + note[keyName]) as unknown) as string;

    if (!(config内のtypeStr)) {
      戻る;
    }

    if (note === undefined || note === null) {
      戻る;
    }

    定数キー = config[typeStr];

    // 値が複数ある場合は配列型に変更します if (ret[key] === undefined) {
      ret[キー] = メモ;
    } そうでない場合 (Array.isArray(ret[key])) {
      (ret[key]をT[]として)push(note);
    } それ以外 {
      const first = ret[キー];
      ret[key] = [first, note];
    }
  });

  ret を返します。
}

//デモ
// 外部で定義された拡張可能なノート ノード リストの値ロジックに適用可能 const { sortType, featureSwitch } = getNoteValue(list, GLOBAL_NOTE_CONFIG, 'ntype');

/**
 * ソートに使用するソート関数を取得します * @param fn 同じ型の要素の比較関数、true はソートの優先順位を意味します */
エクスポート関数 getSort<T>(fn: (a: T, b: T) => boolean): (a: T, b: T) => 1 | -1 | 0 {
  戻り値 (a: T, b: T): 1 | -1 | 0 => {
    ret = 0 とします。

    （fn.call（null、a、b））の場合{
      戻り値 -1;
    } そうでなければ (fn.call(null, b, a)) {
      戻り値 1;
    }

    ret を 0 として返します。
  };
}

/**
 * 複数の並べ替え */
エクスポート関数 getMultipleSort<T>(arr: Array<(a: T, b: T) => 1 | -1 | 0>) {
  戻り値 (a: T, b: T) => {
    tmp にします。
    i = 0 とします。

    する {
      tmp = arr[i++](a, b);
    } while (tmp === 0 && i < arr.length);

    tmp を返します。
  };
}

//デモ
const ageSort = getSort(function(a, b) {
  a.age < b.age を返します。
});

const nameSort = getSort(function(a, b) {
  a.name < b.name を返します。
});

const sexSort = getSort(function(a, b) {
  a.sex && !b.sex; を返します。
});

//判定条件の順序は調整可能 const arr = [nameSort, ageSort, sexSort];

const ret = data.sort(getMultipleSort(arr));