未分類

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

css

今日はcssのデザインに苦戦していました。今までcssを使ったデザインの設計をしてこなかったのでどのように見本のようにデザインを作ればいいのかあたふたしていました。午前中はモチベーションが上がらずまず …

no image

Redux

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

no image

ある種の純粋性の偉大さ

 最近よく思うことなのですが、純粋性って偉大だなと感じます。人間の心を動かすものは全部この上に成り立っていると言っても過言ではないような気がします。この純粋性というのは定義が曖昧なのでもう少し具体的に …

no image

typescript

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

no image

カレンダーアプリ

カレンダーのコンポーネント まず最初にAppコンポーネントにCalendarMenuコンポーネントとCalendarContentコンポーネントに分けました。この二つのコンポーネントには日付のデータを …