未分類

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

一本足の鳩

 今日は面接を受けにいきました。多分いけると思いますが、また落ちるかもわかりません。面接前に暇だったので近くの広場のベンチで考え事をしていました。ベンチが輪っかになってたくさんあり、色々な人々が各々の …

no image

内見etc

今日は社長面談、内見、色々とあって疲れたのでこの辺にしたいと思います。色々ありましたが、いい日でした。 不動産屋さんのスマホの画面 息子さん?とツーショットの写真が素敵だと思いました。

no image

武士道2

phpの内容と読んでいる「武士道」の内容について書きます。 セッション セッションとはサーバー側に一時的にデータを保存する仕組みのことです。クッキーはブラウザ側で保存するのに対してセッションはサーバー …

no image

java

今日はお試し研修があったのでそのことを書きます。お試し研修はほぼほったらかしだったので面白くなかったのですが、javaのいい復習になりました。javaの前にIT業界のことを聴いたのでまずそれについて書 …

no image

回線工事について

今日は契約予定の物件が無料で使用できるインターネット回線の通信速度が下り160Mbpsでリモートワークに適していないということで回線工事をお願いしなければいけない状況になりました。今まで実家のwifi …