Redux: Bagaimana menginisialisasi redux dengan objek tetap

Saya pikir yang Anda inginkan adalah sesuatu seperti ini

// 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)

Anda harus membiarkan toko menentukan status awalnya sendiri menggunakan parameter default seperti yang ditunjukkan @emmenko .

Argumen initialState hanya dimaksudkan untuk digunakan untuk merehidrasi status dari server atau localStorage. ( @acdlite , kami mungkin ingin menjelaskannya di dokumen.)

Yang mengatakan, apa yang Anda coba harus berhasil. Bisakah seseorang menyelidiki?

Tidak, apa yang saya coba tidak berhasil. Saya hanya ingin membuat data awal untuk semua penyimpanan di satu tempat. Saya rasa ini yang seharusnya tidak saya lakukan.

Saya hanya ingin membuat data awal untuk semua penyimpanan di satu tempat. Saya rasa ini yang seharusnya tidak saya lakukan.

Terserah kamu. Saya merasa lebih baik membagi data awal.

Tetap saja, jika ada yang tidak berhasil, biarkan tetap terbuka? Saya akan mengunjungi kembali minggu depan dan melihat mengapa itu tidak berhasil.

Masalahnya adalah dengan composeStores yang mengasumsikan status root adalah objek JS biasa, dan mengakses properti dengan state[key] , yang gagal dengan Immutable.Map . Saya pikir ini mungkin bekerja dengan Immutable.Record karena itu membuat bidang dapat diakses melalui properti JS biasa.

Mungkin ada tempat lain di mana ia mengasumsikan objek polos.

Oh. Itu tangkapan yang bagus! Terima kasih telah menjelaskan. Ini sangat masuk akal.

Menggunakan konektor juga gagal karena alasan yang sama: isPlainObject(Immutable.Record) === false .

@pierregm Ini sebenarnya benar. Jika itu menyebarkan properti Rekam di atas props komponen, itu tidak akan berhasil. Terserah Anda untuk menulis select={state => state.get('something').toJS()} .

Saya bisa membuatnya bekerja seperti ini,

// 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()}
}

Ini berfungsi dengan sempurna tetapi akhirnya merender ulang semua item dalam aliran (tampilan daftar). Saya bertanya-tanya bagaimana seseorang dapat mengimplementasikan sesuatu yang membandingkan status lama vs status baru di tingkat toko dan membatalkan kebutuhan untuk merender komponen apa pun di sana ketika tidak ada perubahan pada data. NuclearJS melakukan ini dengan struktur yang tidak dapat diubah. Apa cara yang direkomendasikan untuk mengimplementasikan sesuatu seperti itu di redux?

@tokopedia

Lihat Pilih Ulang: https://github.com/faassen/reselect. Ini menyediakan fungsionalitas yang mirip dengan getter NuclearJS.

@gaearon Keren! Pembicaraan yang bagus di ReactEurope BTW! Terima kasih.

Ini adalah upaya saya untuk menggunakan Immutable.js dengan redux 1.0.0, https://github.com/gajus/redux-immutable

Bagus @gajus! Menguji redux-immutable sekarang dan sangat menyukai https://github.com/gajus/canonical-reducer-composition pattern

Terima kasih @chiplay. Saya akan sangat menghargai umpan balik jika Anda menemukan kekurangan atau memiliki ide untuk perbaikan.

apakah ada keuntungan menggunakan struktur yang tidak dapat diubah bersama dengan redux? kapan reduks didasarkan pada perilaku yang tidak dapat diubah (misalnya, penyimpanan mengembalikan salinan negara yang baru)? Kinerja (ada tolok ukur?)? atau sesuatu yang lain? Terima kasih

@jodohgratis

Kelebihan menggunakan Immutable dengan Redux:

• Anda tidak dapat bermutasi secara tidak sengaja
• Performa yang jauh lebih cepat dan konsumsi memori yang lebih baik dengan array dan objek yang besar

Kontra menggunakan Immutable with Redux:

• API baru untuk dipelajari untuk tim Anda
• Peningkatan ukuran bundel
• Sedikit lebih sulit untuk di-debug

Pengorbanannya terserah Anda!

@gaul
terima kasih banyak atas jawaban yang cepat dan bermanfaat!

Jika Anda menginginkan ImmutableJs & Redux yang sesuai dengan standar Redux, Anda dapat melihat di https://github.com/indexiatech/redux-immutablejs ,

@ Gaearon Apakah mungkin untuk meletakkan link di situs web?

Terima kasih Asaf. Saya yakin orang akan merasakan manfaatnya.

Pada 4 Sep 2015, pukul 18:36, Asaf Shakarchi [email protected] menulis:

Jika Anda menginginkan ImmutableJs & Redux yang sesuai dengan standar Redux, Anda dapat melihat di https://github.com/indexiatech/redux-immutablejs ,

@ Gaearon Apakah mungkin untuk meletakkan link di situs web?

-
Balas email ini secara langsung atau lihat di GitHub.

@as

Bagus, apakah Anda ingin membuat PR menjadi Ecosystem.md ?
Saya dengan senang hati akan menambahkannya di sana jika Anda menambahkan tes ke proyek Anda.

@gaearon Selesai dengan tes unit, PR adalah: https://github.com/rackt/redux/pull/707

Terima kasih!

Halo semua,
sedikit pertanyaan untuk @gaearon , dari tes cepat yang telah saya lakukan sejauh ini untuk mengimplementasikan ImmutableJS pada aplikasi React / Redux saya yang ada, rasanya sedikit lebih lambat: - / tapi mungkin saya melakukan sesuatu dengan cara yang salah ...

Kasus penggunaan dasar: mendapatkan kumpulan data dari panggilan API dan menyimpannya di peredam ...

Dari peredam saya,
Tanpa ImmutableJS:

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

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

Dengan 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)
})

Saya bertanya-tanya apakah "perawatan" yang dilakukan ImmutableJS tidak lebih mahal di sini?

Dari apa yang saya pahami dari Immutability, manfaatnya lebih banyak saat rendering cepat masuk, bukan?

Terima kasih atas tanggapan Anda.

Manfaatnya adalah pengoperasian pada array dan objek besar membutuhkan biaya lebih sedikit memori dan bekerja lebih cepat. Itu tidak membuat perbedaan besar dalam aplikasi kecil.

Ok terima kasih.
Jadi saya punya pendekatan yang tepat?

Ya, terlihat bagus bagiku.

Sejauh ini trade off sangat berharga .. 💯