未分類

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

html

htmlはマークアップ言語でウェブページに動画・画像・音声などのデータファイルをリンクで埋め込むことができます。その文字列をブラウザが人間が理解できるように表示してくれるのです。 問題解決 最近は頭の …

no image

初投稿!

ブログを始めることにしました。理由は単純で、アウトプットをして知識を深め、もっと楽しくなるように考えることができるようになりたいと思ったのと、何より新しいことを始めたいと思ったからです。 文学、プログ …

no image

創造性とは何か(続)

創造性とは 創造性とはここではただ単にものを生み出すという意味ではなく、その生み出したものによってどのような問題を解決することができるのかまでを創造性と呼んでいます。ここまで人間が文化を発達させ、生き …

no image

音楽とは何か

 今日から「音楽とは何か」を読み始めました。朝起きて少し読んでバイトに行き、終わってから本屋で「教養の書」を立ち読みをし、帰ってから歯医者に行き、また「音楽とは何か」をみました。まず教養の話をすると、 …

no image

PR

機能を実装する際にプルリクエスト言って書いたコードが正しいか第三者に判断してもらうのですが、その際に指摘を受けた箇所を直してまたリクエストを出して、指摘が無くなったら本番のコードに書いたコードをマージ …