未分類

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

初出勤終了

何とか1日目を終えました。会社が忙しいみたいでそんなに作業はなかったのですが、先輩の社員さんに教えてもらいながら開発に必要な準備をしました。まじでパソコン使えなくてヒーヒーしていますが、何とかやってい …

no image

ロジカルシンキング

論理的な思考方法を身につけるための本です。筆者は練習すれば誰でもロジカルなコミュニケーション技術を習得することが可能だと言っています。なぜなら、経験則的に、訓練すれば誰でも身につけることができると確信 …

no image

typescript

typescriptはjavascriptの変数で予期せぬエラーを起こさないために型安全でコードを書くプログラミング言語です。typescriptのコードをjavascriptのコードに変換して使うの …

no image

配達中の無

 今日は配達中は何にも考えていませんでした。配達中脳味噌を使わずに余ったので勉強の方に使おうという算段だったのですが、どうしても終わったら疲れてしまいます。これはバイトの回数を生活できる最低限の数にし …

no image

考えるべきこと

 今日は配達のバイトの時に考え事をしていました。何について考えたかというと、生きるということについて考えていました。なかなかヘビーな内容ですが、書かせてください。なぜこのことを考えたかというと主に三つ …