未分類

redux..

投稿日:

reduxについてわかっていることを復習します。reduxは各コンポーネントからstoreに入っているデータから取り出したいデータのオブジェクトを指定して取り出すことができます。reduxのメリットはプロジェクトの規模が大きくなってきたときにもstateの管理を一つのstoreで管理することができるのでスムーズに開発を進めることができます。特徴としてそのままデータを取り出したり更新したりすることができずreducerと呼ばれる関数を用いて取り出し、変更を行います。このreducer関数には引数として第一引数に現在のstate、第二引数にactionを指定します。このactionも関数でtyoeオブジェクトと更新したい値のオブジェクトを返します。各コンポーネントはreact-reduxライブラリが用意しているProviderというコンポーネントの引数でstoreを与えることでProviderコンポーネントの子要素として指定したコンポーネントの中でstoreのデータをいじることができるのですが、ただコンポーネントを指定するだけではなく、そのコンポーネントをconnect関数の第二引数に指定して渡すことができるようになります。まだconnect関数を理解していないのでこれから学びたいと思います。

仮想DOM

仮想DOMはreactで扱うブラウザが読み込むDOMの要素ツリーを模倣した、メモリーに展開されたイミュータブルな要素ツリーです。ブラウザでなんらかのイベントが発生したりしてツリーのどこかの要素の状態が変更されるとそこにリンクされているコンポーネント関数のrenderメソッドが動きます。動いたコンポーネントの子要素のreact elementsに設定されているpropsにも変更が生じるため、そこで新しいpropsが定義されそれが数珠つなぎ状になり、そこで変更された部分のDOMの要素が非同期で変更されます。各コンポーネントが返す要素はhtmlの記述に限りなく近いJSXで記述されるのですが、その正体はReactオブジェクトに格納されているオブジェクト関数です。なのでJSXを記述する際はimportでReactを読み込まないといけません。

-未分類

執筆者:


comment

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

関連記事

no image

死なないやつら

 今日面接を3つこなしました。もうだいぶ慣れてきたのでイージーモードなのですが、なかなか内定を獲得することができません。あと少しだと思うのでこのまま頑張りたいと思います。あ、一つ内定をいただいたのです …

no image

 今日から「進化しすぎた脳」を見ています。めちゃくちゃ面白いのでそれについて書きます。脳みそがどんな役割を果たすのかというと、人間に命令を下す役割を持っています。動物は色々な感覚を脳を通して知覚してい …

no image

スマートシティ

 今日は古坂大魔王とニュースピックスの佐々木さんがやっている番組の動画をみました。いろんな専門家を集めて決められた話題について議論をしていくという番組なのですが、今日はスマートシティについてやっていま …

no image

サージェントペッパーロンリーハーツクラブバンド

ビートルズ8作目のアルバムです。名盤ランキングでは必ず上位にランクインする名盤なのですが、久しぶりに聴いてやっぱり良かったので少しそれについて書きます。今回で5回目くらいだと思うのですが、聴くたびに好 …

no image

typescriptの配列

今日は午前中ずっとコンポーネントへどのように配列として値を渡すのかを考えていました。配列で値を渡さなくてもデータを渡すことができるのですが、記述が助長になり、可読性が低くなってしまいます。可読性が低く …