watchaM

🌈 watchaM

📎 watchaM github

📎 watcham配置链接

🍊 目的

このプロジェクトは、これまで学んだreact、reducx、styled-componentを総合的に利用するために作成されたプロジェクトです.
最も基本的な、Webページを構成するために必要な機能を体現しています.

🍊 実装機能

20最新映画リスト業

検索ウィンドウで

の検索機能を実現

映画カードをクリックして映画の詳細を提供します

点賛、映画煮込み機能

🍊 Error

redixがreactrouterとともに使用される場合

vcould not find react-redux context value; please ensure the component is wrapped in a < Provide >
最上端は供給をかばう.
ソリューション
https://stackoverflow.com/questions/60329421/usedispatch-error-could-not-find-react-redux-context-value-please-ensure-the

event dispatch & setState

  const heartClick = (data) => {
    dispatch(addLikeMovie(data));
  	setLikeMV(!likeMV)
  };

それぞれの映画jsコンポーネントで画像をクリックすると、likeタグとしてイベントハンドルが追加され、イベント発生時にdispatchでlikeリストの状態が変更され、movieになります.jsコンポーネントのみに属する[likeMV,setLikeMV]=userState(false)状態.
しかし,期待とは異なりdispatchは正常に動作したが,likeMVの状態はtrueにはならず,初期状態を維持し続けた.
どうしてこんなことになったの?
dispatchでは、好きな映画の状態が更新され、すべてのコンポーネントが再ロードされると推測されています.この過程で、movie.jsが初期化されることが起こったようです.
だから最後は映画js親コンポーネントでは、好きなムービー状態でid値に一致するアイテムに変数を割り当ててレンダリングします.
予想通りに操作しますが、レンダリングが多すぎると思います.
現在の状態はallMovie,likeMovieであり,likeMovieのみ更新されているが,すべてのmovieである.js素子に初期化現象が発生した.

🍊 CSS

flexを使用してfetchで受信したムービーをソートします.
しかし、結果は以下の通りです.

19本目、20本目は同じ間隔で右に揃えたい.
だからラベルを作って空白を埋めました.

 <i></i>
 <i></i>
 <i></i>
 <i></i>
 <i></i>
 <i></i>

 i {
    width: ${({ title }) => (title ? '150px' : '200px')};
    margin: 0 1rem;
  }

その結果は望み通りだった.しかし、ランダムに作成された6つのiラベルであるため、より多くの空白が発生すると、ソートが以前のように失敗するという問題が依然として存在します.

🍊 最終結果gif

🍉 カードリスト

🍉 映画の詳細ページ

🍉 私は映画カードが好きです。

🍉 ムービーサーチ

🍊 残念な点

最初から、ステータス管理は適切ではないようです.
1つの素子を十分に利用するために,リスト全体と検索リストを同じ素子として実現し,それを1つの状態として管理した結果,混乱を招いた.
本来は最初から状態を区切って行うべきだったのですが、現在は不潔になっており、検索後に完全リストに入る際に状態を再アップロードする必要があるなど、不要な状態アップロードが発生しています.これにより、ページ全体が再ロードされます.
当初は異なる状態で管理されていたのであれば、路線によって異なる状態で使用すれば良いのですが・・・判断が間違っているようです.
管理する状態を整理してから行うべきです.
途中で計画を修正するのはとてもつらいことです...