未分類

clickで状態を持たせる

投稿日:

Todoコンポーネントで表示させたリストに✌️の絵文字を使って表示させ、クリックすると😭に変更するように実装しました。これを実現させるにはstoreに保存されているreducerで保存をしているtodosのなかのcompletedという状態を表した変数の値をtrueかfalseの2種類で現在クリックされている状態か、されていない状態かを表現します。最初リストの中身をAddTodoコンポーネントのdispatchで保存するアクションの中にデフォルトでcompletedプロパティにfalseを渡しておき、リストがクリックされたらstateの中のtodosオブジェクトの配列の中の要素completedプロパティの値の真偽値を反転させます。これはTodoコンポーネントの中のdispatch関数の引数にcompletedの値の真偽値を反転させるアクションを渡してあげればそれ専用のreducerが動き、storeの値をアクションから渡ってきた値に更新します。そこからそのcompletedの真偽値の値によってviewで表示させる絵文字を変えたいのでstoreから変更されたcompletedの値を持ってくる必要があります。その役割を担うのがconnect関数で第一引数にmapStateToProps、第二引数にmapDispatchToPropsを定義し前者ではstoreに保存されている値を取り出す処理、後者はstoreの値をdispatchを使って新しい値に更新させるようにします。そのconnect関数が返す関数の引数にstoreにある値を扱いたいコンポーネントを引数に渡すことによってstoreと自由にやりとりすることができます。このめんどくさい作業をすることによってコンポーネントの中で状態を持つ必要がなくなり、違う部分で状態を扱う処理を書くことができます。

-未分類

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

zoomなう

中学の友達とzoomでオンライン飲み会をしています。三人でやっているのですが、相手の二人は一緒にいてスマブラをやっています。画面では二人がスマブラに夢中になっている映像がさっきから流れていて、中学校の …

no image

決意

 今日は何もない日だったので色々考えていたのですが、phpを勉強してポートフォリオを作って就職を決めようと思いました。なので毎日の学習をキータでアウトプットすることを始めたいと思います。今日学んだこと …

no image

パッケージ

今日は普段使っているパッケージについて学びました。いつもパッケージ管理ソフトのyarnを使ってインストールやら実行やらを行っているのですが、それが内部でどのような動きをしているのかなんて考えたこともあ …

no image

Redux

storeでデータを管理してどのコンポーネントからでもデータを受け取れる仕組みです。storeはアプリケーションで一つだけ持つことができ、その中で一つのstateを持っています。その中のstateを直 …

no image

目標設定

「世界一やさしい問題解決の授業」もとうとう最終章となりました。ここまでは見事キノコloversの3人が5回目のライブで観客数を大幅に増やすことに成功しました。最終章はCGアニメの映画監督を目指すタロー …