web-dev-qa-db-ja.com

Fluxの代わりにReduxを使用することの欠点は何ですか

私はつい最近発見した Redux 。それはすべてよさそうです。 Flux over Reduxを使用することの欠点、欠点、妥協点はありますか？ありがとう

reactjsreduxfluxreactjs-flux
234
Ivan Wang

Reduxの作者はこちら！

私はあなたがそれを使って以下の妥協をするつもりであると言いたいです：

  • 突然変異を避けるために学ぶ必要があるでしょう。 Fluxはデータの変異については全く関心を持っていませんが、Reduxは変異を好まず、Reduxを補完する多くのパッケージはあなたが状態を変異しないと仮定しています。 redux-immutable-state-invariant のような開発専用パッケージ、 Immutable.js を使う、または自分自身とあなたのチームを信頼して変更のないコードを書くことができます。あなたが知っておく必要がある何か、そしてこれはあなたのチームが受け入れる意識的な決断である必要があります。

  • あなたは慎重にあなたのパッケージを選ぶ必要があるでしょう。 Fluxは ndo/redo 、 persistence 、 forms といった「近くにある」問題を明示的に解決しようとはしませんが、Reduxには次のような拡張ポイントがあります。ミドルウェアやストアエンハンサーとして、そしてそれは 若くて豊かな生態系 を生み出しました。これは、ほとんどのパッケージが新しいアイデアであり、まだ使用のクリティカルマスを受け取っていないことを意味します。あなたは数ヶ月後に明らかに悪い考えになるものに依存するかもしれませんが、それはまだまだ言うのは難しいです。

  • Nice Flowとの統合はまだできません。 現在のFluxでは非常に印象的な静的型チェックを行うことができます which Redux まだサポートしていません 。私たちはそこに着くでしょう、しかしそれは時間がかかります。

1つ目は初心者にとって最大のハードル、2つ目は熱狂的な早期導入者にとっての問題、そして3つ目は私の個人的な問題です。それ以外に、私はReduxを使うことがFluxが避けているどんな特別な欠点も持っていないと思います、そして何人かの人々はそれがFluxと比較して若干の利点さえ持っていると言います。

Reduxを使用することの利点 についての私の回答も参照してください。

400
Dan Abramov

ReduxとFluxはどちらも、多くの一般的なパターン、特に非同期データフェッチを含むパターンをカバーするためにかなりの量の定型コードを必要とします。 Reduxのドキュメントにはすでにボイラープレート削減のための例がいくつかあります。 http://redux.js.org/docs/recipes/ReducingBoilerplate.html 。 AltやFluxxorのようなFluxライブラリから必要なものをすべて手に入れることができますが、Reduxは機能よりも自由を好みます。 Reduxはあなたの状態について誤って無視される可能性があると仮定しているため、これは一部の開発者にとってはマイナス面になる可能性があります。

あなたが本当にあなたの質問に答える唯一の方法は、おそらく個人的なプロジェクトで、もし可能ならReduxを試すことです。 Reduxはより良い開発者経験の必要性のために生じました、そしてそれは関数型プログラミングに偏っています。あなたが減速機や機能構成のような機能概念に慣れていないなら、あなたは遅くなるかもしれませんが、ほんの少しだけ。これらのアイデアをデータフローに取り入れることの利点は、テストと予測が容易になることです。

免責事項：私はFlummox（人気のあるFluxの実装）からReduxに移行しました、そしてその逆さまのものはどんな欠点よりもはるかに上回っていました。私は自分のコードの中では魔法のほうがずっと好きです。魔法が減ると、もう少し定価が必要になりますが、支払うには非常に小さい価格です。

35
velveteer

他のFluxの選択肢よりもReduxを使用することの最大の利点の1つは、より機能的なアプローチに向かってあなたの思考を方向転換することができることです。すべてのワイヤがどのように接続されているかを理解したら、あなたはその見事な優雅さとデザインのシンプルさに気づき、決して戻ることはできません。

15
cnp

Reduxを使用することをお勧めします。1つのストアを使用するため、Flux、Redux DevToolsに比べて状態管理がはるかに簡単になります。あなたが自分の状態で何をしているのかをいくつかの役に立つデータで見ることができる本当に役に立つツールであり、それはReact開発ツールと本当にインラインです。

また、Reduxは、Angularのような他の一般的なフレームワークと併用するとより柔軟になりました。とにかく、Reduxが自分自身をフレームワークとして紹介する方法を見てみましょう。

ReduxにはThree Principlesがあり、Reduxを非常にうまく導入できます。これらはReduxとFluxの主な違いです。

真実の単一の源

アプリケーション全体の状態は、単一ストア内のオブジェクトツリーに格納されています。

追加のコーディング作業を行わなくても、サーバーからの状態をシリアル化してクライアントに取り込むことができるため、これによってユニバーサルアプリケーションを簡単に作成できます。単一の状態ツリーを使用すると、アプリケーションのデバッグや検査も簡単になります。また、開発サイクルを短縮するために、アプリの開発状態を維持することもできます。たとえば、元に戻す/やり直すなど、従来は実装が困難だった機能の中には、すべての状態が単一のツリーに格納されている場合、突然実装が簡単になるものがあります。

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

状態は読み取り専用です

状態を変更する唯一の方法は、何が起こったのかを記述するオブジェクトであるアクションを発行することです。

これにより、ビューもネットワークコールバックも状態に直接書き込むことは決してありません。代わりに、彼らは国家を変革するという意図を表明しています。すべての変更は集中管理されており、厳密な順序で1つずつ発生するため、注意が必要な微妙な競合状態はありません。アクションは単なるオブジェクトなので、ログに記録し、シリアル化し、保存し、後でデバッグまたはテスト目的で再生することができます。

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

純粋な関数で変更が行われました

状態ツリーがアクションによってどのように変換されるかを指定するために、純粋な減数子を書きます。

リデューサーは、前の状態とアクションを実行して次の状態を返す純粋な関数です。前の状態を変更するのではなく、必ず新しい状態オブジェクトを返すようにしてください。あなたは単一のリデューサーから始めることができます、そしてあなたのアプリが成長するにつれて、ステートツリーの特定の部分を管理するより小さなリデューサーにそれを分割します。リデューサーは単なる機能なので、呼び出しの順序を制御したり、追加データを渡したり、ページ付けなどの一般的なタスクに再利用可能なリデューサーを作成したりすることもできます。

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)

詳細な情報は--- ここ をご覧ください

4
Alireza

Reduxは不変性に関してしつけが必要です。私が推薦することができる何かはあなたにどんな偶然の州の突然変異についても知らせるためにng-freezeです。

0
Leonardo