Redux: Pertanyaan: Mutasi objek dalam dalam keadaan di peredam

Dibuat pada 15 Apr 2016 · 3Komentar · Sumber: reduxjs/redux

Apakah ini peredam redux yang valid?

function reducer(state={ byId: {}, ids: [] }, action) {
  switch (action.type) {
    case 'ADD':
      state = { ...state }
      state.byId[action.id] = action.value
      state.ids.push(action.id)
      return state

    default:
      return state
  }
}

Seluruh keadaan dikloning terlebih dahulu, jadi objek baru akan dikembalikan, tetapi objek dalam tetap sama dan bermutasi.

Atau apakah saya harus melakukan sesuatu seperti:

function reducer(state={ byId: {}, ids: [] }, action) {
  switch (action.type) {
    case 'ADD':
      return {
        ...state,
        byId: {
          ...state.byId,
          [action.id]: action.value
        },
        ids: [ ...state.ids, action.id ]
      }

    default:
      return state
  }
}

Efek samping yang saya lihat dengan pendekatan pertama ada di DevTools LogMonitor:

memperluas sub node (misalnya byId ) dalam keadaan sebelumnya akan menunjukkan nilai yang sama dengan yang terbaru bahkan ketika itu adalah sesuatu yang lain sebelumnya
perjalanan waktu tidak berhasil

Apakah itu hanya bug di LogMonitor atau pendekatan kedua yang benar? Jika saya menambahkan state = _.cloneDeep(state) sebelum mutasi itu benar-benar berfungsi dengan baik, membuktikan bahwa LogMonitor menggunakan kembali objek yang sama, maka nilai yang sama.

Sisa aplikasi berfungsi dengan baik dan tampilan @connect ed diperbarui dengan benar.

Sumber

elado

Komentar yang paling membantu

Contoh terakhir adalah apa yang perlu Anda lakukan. Jelas, itu bisa menjadi agak bertele-tele jika Anda bersarang. Ada beberapa pustaka utilitas yang mencoba mengabstraksikannya untuk Anda, dan saya memiliki beberapa di antaranya terdaftar di halaman Data Tidak Berubah dari daftar pustaka Redux saya.

Juga komposisi peredam membantu dalam hal ini.

function byId(state = {}, action) {
  switch (action.type) {
    case 'ADD':
      return {
        ...state,
        [action.id]: action.value
      }
    default:
      return state
  }
}

function ids(state = [], action) {
  switch (action.type) {
    case 'ADD':
      return [ ...state, action.id ]
    default:
      return state
  }
}

const reducer = combineReducers({
  byId,
  ids
})

gaearon pada 16 Apr 2016

👍2

Semua 3 komentar

Tidak, contoh pertama itu benar-benar mengubah status. Salinan dangkal awal membuat objek baru, tetapi objek baru menunjuk ke referensi byId dan ids yang sama seperti aslinya. Jadi, ketika Anda melakukan byId[action.id] = action.value dan ids.push(action.id) , Anda mengubah item asli.

Contoh terakhir adalah apa yang perlu Anda lakukan. Jelas, itu bisa menjadi agak bertele-tele jika Anda bersarang. Ada beberapa pustaka utilitas yang mencoba mengabstraksikannya untuk Anda, dan saya memiliki beberapa di antaranya terdaftar di halaman Data Tidak Berubah dari daftar pustaka Redux saya.

FAQ Redux juga memiliki pertanyaan yang mencakup pembaruan status yang benar secara permanen: http://redux.js.org/docs/FAQ.html#react -not-rerendering .

markerikson pada 15 Apr 2016

👍1

Contoh terakhir adalah apa yang perlu Anda lakukan. Jelas, itu bisa menjadi agak bertele-tele jika Anda bersarang. Ada beberapa pustaka utilitas yang mencoba mengabstraksikannya untuk Anda, dan saya memiliki beberapa di antaranya terdaftar di halaman Data Tidak Berubah dari daftar pustaka Redux saya.

Juga komposisi peredam membantu dalam hal ini.

function byId(state = {}, action) {
  switch (action.type) {
    case 'ADD':
      return {
        ...state,
        [action.id]: action.value
      }
    default:
      return state
  }
}

function ids(state = [], action) {
  switch (action.type) {
    case 'ADD':
      return [ ...state, action.id ]
    default:
      return state
  }
}

const reducer = combineReducers({
  byId,
  ids
})

gaearon pada 16 Apr 2016

👍2

@gaearon @markerikson Terima kasih. Saya akhirnya menulis peredam tingkat tinggi yang mengelola daftar terindeks dinamis (berdasarkan ID)

Kode: https://Gist.github.com/elado/95484b754f31fcd6846c7e75de4aafe4

elado pada 19 Apr 2016

Apakah halaman ini membantu?

0 / 5 - 0 peringkat