Reduxは単にグローバルな状態を称賛しただけではありませんか？

Question 1

そのため、1週間前にReactの学習を開始しましたが、必然的に状態の問題と、コンポーネントがアプリの他の部分とどのように通信するかという問題に直面しました。探し回ったところ、Reduxが今月の味のようです。私はすべてのドキュメントを読みましたが、実際にはかなり革新的なアイデアだと思います。これが私の考えです：

州は一般的にかなり邪悪であり、プログラミングのバグの大きな原因であることに同意しています。アプリ全体に分散させるのではなく、Reduxは、変更するアクションを発行する必要があるグローバル状態ツリーにすべてを集中させないのはなぜですか？面白そう。すべてのプログラムには状態が必要なので、1つの不純なスペースに貼り付け、そこからのみ変更して、バグを簡単に追跡できるようにします。次に、個々の状態の断片をReactコンポーネントに宣言的にバインドし、それらを自動再描画させることもできます。すべてが美しいです。

ただし、このデザイン全体について2つの質問があります。まず、状態ツリーが不変である必要があるのはなぜですか？タイムトラベルのデバッグやホットリロードは気にせず、アプリに元に戻す/やり直しをすでに実装しているとします。これをしなければならないのはとても面倒に思えます：

case COMPLETE_TODO:
  return [
    ...state.slice(0, action.index),
    Object.assign({}, state[action.index], {
      completed: true
    }),
    ...state.slice(action.index + 1)
  ];

これの代わりに：

case COMPLETE_TODO:
  state[action.index].completed = true;

言うまでもなく、私は学ぶためだけにオンラインホワイトボードを作成しています。すべての状態変更は、コマンドリストにブラシストロークを追加するのと同じくらい簡単かもしれません。しばらくすると（数百のブラシストローク）、このアレイ全体を複製すると、非常に費用と時間がかかるようになる可能性があります。

アクションを介して変更されるUIから独立したグローバル状態ツリーで問題ありませんが、本当に不変である必要がありますか？このような単純な実装（非常にラフなドラフト。1分で記述）の何が問題になっていますか？

var store = { items: [] };

export function getState() {
  return store;
}

export function addTodo(text) {
  store.items.push({ "text": text, "completed", false});
}

export function completeTodo(index) {
  store.items[index].completed = true;
}

これは、発行されたアクションによって変更されたグローバル状態ツリーですが、非常にシンプルで効率的です。

Question 2

Reduxは単にグローバルな状態を称賛しただけではありませんか？

もちろん。しかし、これまでに使用したすべてのデータベースについても同じことが言えます。Reduxをメモリ内データベースとして扱うことをお勧めします-コンポーネントが反応的に依存する可能性があります。

不変性により、サブツリーが非常に効率的に変更されているかどうかをチェックできます。これは、IDチェックまで単純化されるためです。

はい、実装は効率的ですが、ツリーが何らかの方法で操作されるたびに、仮想DOM全体を再レンダリングする必要があります。

Reactを使用している場合、最終的には実際のdomとの差分を実行し、バッチ最適化された最小限の操作を実行しますが、完全なトップダウンの再レンダリングは依然として非効率的です。

不変ツリーの場合、ステートレスコンポーネントは、依存するサブツリーが以前の値と比較してIDが異なるかどうかを確認するだけでよく、そうであれば、レンダリングを完全に回避できます。