究極のマネージャー: Redux I

ちょっと、そこ！一緒に Redux を学びましょう。

これは、Redux を学習するための私の試みです.私はあるトピックについて調べ、すぐにそれについて書くことによって最もよく学びます. (えっと! これは私の英文学 + 教育学のバックグラウンドの話です.) それでは、一緒に Redux を学びましょう.

リダックスとは？

簡単に言うと、Redux は状態管理ライブラリです. Redux は、Single Source of Truth の原則を体現しています. Redux は、アプリケーションの状態 (および関連するすべてのロジック) を取得し、それをアプリケーションの外の 1 つの場所に移動するように機能します.

では、なぜ Redux はこれを行うのでしょうか。ポイントは？

良い質問. 5分前は、私も頭を抱えていませんでした.したがって、すべての状態を取得して上記の単一の場所に移動することにより、アプリケーションのコンポーネントのいずれかが状態にアクセスできます.

アプリケーションが成長するにつれて、非常に多くのコンポーネントが含まれる可能性があり、それらすべてのコンポーネントが状態にアクセスしたり操作したりする必要がある場合があるため、これは重要です!

ところで、Single Source of Truth の原則とは何ですか?

Single Source of Truth は、「すべての人」がそのデータを使用できるようにデータを構造化する方法を実践しています. Redux を使用してアプリケーションの外部に状態を保存する場合、すべてのコンポーネントが状態とそのロジックにアクセスできます.以前は、コンポーネントごとに個別に状態を宣言し、コンポーネントからコンポーネントに状態を渡すための呼び出しが絶対に必要でした.

状態が保存されているこの単一の場所はどこ (または何) ですか?

Redux は、アプリケーションの状態を取り巻く必要なすべてのデータを JavaScript オブジェクトに格納します.ただし、このオブジェクトはアプリケーションとは別のものであることに注意してください.外側です!これにより、任意のコンポーネントが必要なデータの任意の部分を取得できます.

Redux をアプリケーションに接続するにはどうすればよいですか?

このデータ (状態) を任意のコンポーネントで利用できるようにするために、コンポーネントを Redux オブジェクトでラップできます.このオブジェクトをストアと呼びます.

保存された状態がどのように見えるかの例を次に示します.

state = {
  person: {
    name: 'Adriana',
    hometown: 'NYC'
  },
  interests: [
    {
      name: 'pokemon',
      type: 'game'
    },
    {
      name: 'game of thrones',
      type:'tv show'
    },
    {
     name: 'cooking',
     type: 'hobby'
    }
  ]
} 

ご覧のとおり、これは単純な JS オブジェクトです.アプリケーションが複雑になるにつれて、この JS オブジェクトも複雑になります.ただし、ストアのルートでは、単純な JS オブジェクトの単純な特性であるキーと値が表示されます.

簡単なまとめ

Redux = 状態管理.

Redux は JS ライブラリです.

Redux はデータを JS オブジェクト (ストア) に格納します.

Redux は、Single Source of Truth の原則を示しています.

単一の状態コンテナーにより、任意のコンポーネントがデータにアクセスできます.

Redux は、React や Angular などのフロントエンド フレームワークで使用できます.

JS オブジェクトにはキーと値があります.

一緒に読んでくれてありがとう...

🌲 コメントや質問は下記までお願いします!私はあなたと一緒に学び続けたいです! 🌲

🌲 Redux に関する私の次の投稿をチェックしてください !🌲