[react][DJplaylist]Reducerと検索結果の変更

ショベルクリスタル

検索結果を含む音楽リストは空の配列にのみ初期化され、検索時にnextPageTokenとitemsをオブジェクトとして組み合わせます.
返されるデータの検索例

最初の実施ではnextPageTokenは考慮されず,返されたデータをそのまま保存した.(私の意図通りに書いたようですが…)

現在は限られた日次割当で検索結果が制限されているため、nextPageTokenは考慮されていませんが、今後のためにnextPageTokenから分離することが望ましいです.

検索結果の変更

現在検索したキーワードに対して結果が出ない場合は何も対応していないので,検索結果が出ない場合には素子を追加した.

import React from 'react';
import { icons } from '../constants';
import {
  CatFaceIcon,
  SearchResultEmptyWrapper,
  SearchResultEmptyText,
} from '../styles/searchStyle';

function SearchResultEmpty() {
  return (
    <SearchResultEmptyWrapper>
      <CatFaceIcon src={icons.catFace} alt="catFace" />
      <SearchResultEmptyText>앗! 찾으시는 결과가 없네요.</SearchResultEmptyText>
    </SearchResultEmptyWrapper>
  );
}

export default SearchResultEmpty;

Reducerを交換するとともに、Presentational and Container Component Patternを使用してコードを記述しているため、データをインポートするコンポーネントを交換する必要があります.