Redux: 不変オブジェクトでreduxを初期化する方法

あなたが欲しいのはこんな感じだと思います

// stores/some-store.js
import Immutable from 'immutable'

const { Map, List, fromJS } = Immutable
const initialState = Map({
  foo: 'bar',
  fooList: List()
})

export function someStore (state = initialState, action) {
  if (action.type === 'FOO') {
    return state.set('foo', fromJS(action.foo))
  }
  if (action.type === 'FOO_LIST') {
    return state.set('fooList', fromJS(action.fooList))
  }

  return state
}

// stores/index.js
export { default as someStore } from './some-store'

// application.js
import * as stores from './stores'

const redux = createRedux(stores)

@emmenkoが示したようなデフォルトのパラメータを使用して、ストアに独自の初期状態を定義させる必要があります。

initialState引数は、サーバーまたはlocalStorageから状態を再水和するためにのみ使用されることを意図しています。 （ @acdlite 、これについてはドキュメントで説明したいと思うかもしれません。）

そうは言っても、あなたが試したことはうまくいくはずです。 誰かが調査できますか？

いいえ、試したものは機能しません。 すべての店舗の初期データを1か所で作成したいだけです。 これは私がすべきではないことだと思います。

すべての店舗の初期データを1か所で作成したいだけです。 これは私がすべきではないことだと思います。

それはあなた次第です。 初期データを分割したほうがいいと思います。

それでも、何かがうまくいかない場合は、開いたままにしておきましょう。 来週再訪して、なぜそれが機能しなかったのかを見ていきます。

問題は、ルート状態がプレーンJSオブジェクトであると想定しているcomposeStoresにあり、 state[key]でプロパティにアクセスしますが、 Immutable.Mapで失敗します。 通常のJSプロパティを介してフィールドにアクセスできるようになるため、 Immutable.Record機能する可能性があると思います。

ただし、プレーンオブジェクトを想定している場所は他にもあるかもしれません。

ああ。 それは素晴らしいキャッチです！ 説明してくれてありがとう。 これは完全に理にかなっています。

コネクタの使用も、まったく同じ理由で失敗します： isPlainObject(Immutable.Record) === false 。

@pierregmこれは実際には正しいです。 Recordプロパティをコンポーネントの小道具に分散させた場合、それはとにかく機能しません。 select={state => state.get('something').toJS()}を書くの

私はそれをこのように動作させることができました、

// store
const initialState = Immutable.fromJS({}).toOrderedMap();

export default function streamStore(state = initialState, action) {
  switch (action.type) {

    case actionTypes.FETCH_STREAM_DONE:
      var streamMap = {};

      for (var i in action.stream_data) {
        var item = action.stream_data[i];
        streamMap[item.id] = item;
      }
      return state.merge(Immutable.fromJS(streamMap).toOrderedMap());

    default:
      return state
  }
};

// select
function select(state) {
  return {stream: state.stream.toList()}
}

完全に機能しますが、ストリーム内のすべてのアイテムを再レンダリングすることになります（リストビュー）。 古い状態と新しい状態をストアレベルで比較し、データに変更がない場合にコンポーネントをその場でレンダリングする必要性を無効にする何かを実装するにはどうすればよいのでしょうか。 NuclearJSは、これを不変の構造で行います。 そのようなものをreduxで実装するための推奨される方法は何でしょうか？

@owais

再選択を確認してください： https ：

@gaearonかっこいい！ ReactEurope BTWで素晴らしい話を！ ありがとう。

これは、redux 1.0.0、 https：//github.com/gajus/redux-immutableでImmutable.jsを使用する私の試みです

素敵な@gajus！ 今すぐredux-immutableテストし、 https：//github.com/gajus/canonical-reducer-compositionパターンが本当に気に入ってい

@chiplayありがとうございます。 不備に遭遇したり、改善のためのアイデアがあれば、フィードバックをいただければ幸いです。

reduxと一緒に不変の構造を使用する利点はありますか？ reduxが不変の動作に基づいている場合（たとえば、ストアが状態の新しいコピーを返す場合）？ パフォーマンス（ベンチマークはありますか？）？ または、他の何か？ THX

@jsifalda

ReduxでImmutableを使用することの長所：

• 誤って変異させることはできません
• 大きな配列とオブジェクトを使用すると、パフォーマンスが大幅に向上し、メモリ消費が向上します

ReduxでImmutableを使用することの短所：

• チームのために学ぶための新しいAPI
• バンドルサイズの増加
• デバッグが少し難しい

トレードオフはあなた次第です！

@gaearon
迅速で役立つ回答をありがとうございました！

Redux標準に準拠するImmutableJsとReduxが必要な場合は、 https：//github.com/indexiatech/redux-immutablejsをご覧ください。

@gaearon Webサイトにリンクを張ることはできますか？

アサフありがとう。 きっと人々はそれが役に立つと思うでしょう。

2015年9月4日には、午前18時36分で、アサフShakarchiの[email protected]は書きました：

Redux標準に準拠するImmutableJsとReduxが必要な場合は、 https：//github.com/indexiatech/redux-immutablejsをご覧ください。

@gaearon Webサイトにリンクを張ることはできますか？

—
このメールに直接返信するか、GitHubで表示してください。

@asaf

いいもの、 Ecosystem.md PRしたいですか？
プロジェクトにテストを追加する場合は、喜んで追加します。

@gaearonユニットテストで完了、PRは次のとおりです： https ：

ありがとう！

こんにちは、みんな、
@gaearonへのちょっとした質問です。既存のReact / ReduxアプリにImmutableJSを実装するためにこれまでに行った簡単なテストから、少し遅く感じます：-/しかし、おそらく私は間違った方法で何かをしています...

基本的な使用例：API呼び出しからデータのコレクションを取得し、それをレデューサーに保存します...

私のレデューサーから、
ImmutableJSなし：

const initialStore = {
    isLoading : false,
    error     : null,
    data      : []
}

// in the switch case
return {
   ...state,
   isLoading: false,
   error: null,
   data: action.result
}

ImmutableJSを使用

const initialStore = Map({
    isLoading : false,
    error     : null,
    data      : List()
})

// in the handler function
return state.merge({
    isLoading: false,
    error: null,
    data: List(result.result)
})

ImmutableJSが行っている「治療」は、ここではもっと費用がかからないのだろうか？

不変性から私が理解していることから、レンダリングが迅速に行われると、より多くのメリットがありますよね？

ご意見をいただきありがとうございます。

利点は、大きな配列やオブジェクトでの操作にかかるメモリが少なくて済み、動作が速くなることです。 小さなアプリケーションでは大きな違いはありません。

わかりました、ありがとう。
とにかく私は正しいアプローチを持っていますか？

ええ、私には似合います。

これまでのところ、トレードオフはそれだけの価値があります。💯