Redux: `combineReducers` doc tidak menjelaskan bagaimana cara menebak bagian mana yang akan diteruskan ke peredam

Dibuat pada 8 Agu 2015  ·  7Komentar  ·  Sumber: reduxjs/redux

Dokumen combineReducers baru tidak masalah, tetapi tidak menjelaskan bahwa Anda harus memberi nama reducer sebagai pihak dari negara bagian yang dikelolanya.

docs

Komentar yang paling membantu

Terima kasih atas umpan baliknya, itu sangat berharga.

Saya ingin menekankan itu

Konvensi adalah bagian dari API

tidak benar.

Kita mungkin harus menghindari import * di dokumen karena orang menganggap itu bagian integral dari API padahal itu bukan sama sekali, dan itu hanya pintasan nyaman yang saya gunakan.

Nama fungsi hanya penting karena cara kerja ES6 export dan import * as .

Btw, saya masih bingung bagaimana cara melewatkan subpart of state ke reducer. Haruskah saya camelCase bergabung dengan mereka atau apa? state={owner: {name: 'John'} } → ekspor fungsi ownerName(state = [], action)?

Tidak :-). Ini bukan API ajaib. combineReducers(object) menggabungkan beberapa reduksi menjadi satu, dan meneruskan sebagian status ke nilainya dengan kunci yang Anda berikan. Ini hanya melakukan ini tepat satu tingkat dalam. Tidak ada "membangun seluruh pohon ajaib". Terserah Anda untuk membagi peredam menjadi lebih banyak fungsi:

// Function names don't matter!
function processA(state, action) { ... }
function doSomethingWithB(state, action) { ... }

function reducer(state = {}, action) {
  return {
    // Because you call them!
    a: processA(state.a, action),
    b: doSomethingWithB(state.b, action)
  };
}

// Not using combineReducers
let store = createStore(reducer);

Mereka bahkan tidak masalah jika Anda menggunakan combineReducers helper selama Anda membuat objek sendiri :

// Function names don't matter!
function processA(state, action) { ... }
function doSomethingWithB(state, action) { ... }

/*
function reducer(state = {}, action) {
  return {
    a: processA(state.a, action),
    b: doSomethingWithB(state.b, action)
  };
}
*/
let reducer = combineReducers({
  a: processA,
  b: doSomethingWithB
});

let store = createStore(reducer);

Anda dapat melakukan ini berkali-kali.

Sebelum:

// Function names don't matter!
function processSomePartOfA(state, action) { ... }
function doSomethingWithOtherPartOfA(state, action) { ... }

function processA(state, action) {
  return {
    // Because you call them!
    somePart: processSomePartOfA(state.somePart),
    otherPart: doSomethingWithOtherPartOfA(state.otherPart)
  }
}
function doSomethingWithB(state, action) { ... }

function reducer(state = {}, action) {
  return {
    // Because you call them!
    a: processA(state.a, action),
    b: doSomethingWithB(state.b, action)
  };
}

// Not using the helper
let store = createStore(reducer);

Kamu melihat? Itu hanya fungsi memanggil fungsi. Tidak ada "barang yang dalam" ajaib.
Dan Anda juga dapat menggunakan combineReducers berkali-kali:

// Function names don't matter!
function processSomePartOfA(state, action) { ... }
function doSomethingWithOtherPartOfA(state, action) { ... }

/*
function processA(state, action) {
  return {
    somePart: processSomePartOfA(state.somePart),
    otherPart: doSomethingWithOtherPartOfA(state.otherPart)
  }
}
*/
let processA = combineReducers({
  somePart: processSomePartOfA,
  otherPart: doSomethingWithOtherPartOfA
});

function processA(state, action) { ... }
function doSomethingWithB(state, action) { ... }

/*
function reducer(state = {}, action) {
  return {
    a: processA(state.a, action),
    b: doSomethingWithB(state.b, action)
  };
}
*/
let reducer = combineReducers({
  a: processA,
  b: doSomethingWithB
});

let store = createStore(reducer);

Satu-satunya bagian di mana nama fungsi penting adalah ketika Anda menggunakan export + import * as untuk "mendapatkan" objek yang Anda berikan ke combineReducers karena _itulah cara kerja import * ! Itu menempatkan sesuatu di objek berdasarkan kunci ekspor mereka.

Saya pikir kesalahan terbesar saya di sini adalah menganggap pembaca akrab dengan ekspor bernama.

Semua 7 komentar

Itu agak mengatakannya jika Anda membacanya sepenuhnya, tanpa melewatkan:

Pereduksi yang dihasilkan memanggil setiap peredam anak, dan mengumpulkan hasilnya ke dalam satu objek status. Bentuk objek status cocok dengan kunci dari reduksi yang diteruskan.

Tapi saya setuju ini perlu lebih menonjol, karena orang sering melewatkan kalimat ini.
Apakah perubahan dari #399 akan membantu Anda?

Saya lebih suka ilmu komputer yang lebih sedikit, catatan eksplisit tentang konvensi ini tepat setelah contoh:

Perhatikan bahwa reduksi diberi nama todos dan counter -- persis seperti bagian dari status yang kita berikan kepada mereka.

Untuk meneruskan sebagian status ke peredam, Redux menggunakan _convention_ -- peredam harus dinamai persis sebagai bagian dari status yang ingin Anda berikan.

Saya pikir #399 bagus tapi ini adalah penjelasan untuk _pengguna Flux_. Saya datang ke Redux segar dari perahu. Beberapa bentuk teks saya akan lebih membantu untuk pengembang JavaScript biasa.

Ide penting di sini adalah: Konvensi adalah bagian dari API . Sama pentingnya dengan createRedux , createDispatcher dan fungsi API lainnya. Selalu nyatakan konvensi secara eksplisit karena merupakan bagian dari API.

Btw, saya masih bingung bagaimana cara melewatkan subpart of state ke reducer. Haruskah saya camelCase bergabung dengan mereka atau apa? state={owner: {name: 'John'} }export function ownerName(state = [], action) ?

Terima kasih atas umpan baliknya, itu sangat berharga.

Saya ingin menekankan itu

Konvensi adalah bagian dari API

tidak benar.

Kita mungkin harus menghindari import * di dokumen karena orang menganggap itu bagian integral dari API padahal itu bukan sama sekali, dan itu hanya pintasan nyaman yang saya gunakan.

Nama fungsi hanya penting karena cara kerja ES6 export dan import * as .

Btw, saya masih bingung bagaimana cara melewatkan subpart of state ke reducer. Haruskah saya camelCase bergabung dengan mereka atau apa? state={owner: {name: 'John'} } → ekspor fungsi ownerName(state = [], action)?

Tidak :-). Ini bukan API ajaib. combineReducers(object) menggabungkan beberapa reduksi menjadi satu, dan meneruskan sebagian status ke nilainya dengan kunci yang Anda berikan. Ini hanya melakukan ini tepat satu tingkat dalam. Tidak ada "membangun seluruh pohon ajaib". Terserah Anda untuk membagi peredam menjadi lebih banyak fungsi:

// Function names don't matter!
function processA(state, action) { ... }
function doSomethingWithB(state, action) { ... }

function reducer(state = {}, action) {
  return {
    // Because you call them!
    a: processA(state.a, action),
    b: doSomethingWithB(state.b, action)
  };
}

// Not using combineReducers
let store = createStore(reducer);

Mereka bahkan tidak masalah jika Anda menggunakan combineReducers helper selama Anda membuat objek sendiri :

// Function names don't matter!
function processA(state, action) { ... }
function doSomethingWithB(state, action) { ... }

/*
function reducer(state = {}, action) {
  return {
    a: processA(state.a, action),
    b: doSomethingWithB(state.b, action)
  };
}
*/
let reducer = combineReducers({
  a: processA,
  b: doSomethingWithB
});

let store = createStore(reducer);

Anda dapat melakukan ini berkali-kali.

Sebelum:

// Function names don't matter!
function processSomePartOfA(state, action) { ... }
function doSomethingWithOtherPartOfA(state, action) { ... }

function processA(state, action) {
  return {
    // Because you call them!
    somePart: processSomePartOfA(state.somePart),
    otherPart: doSomethingWithOtherPartOfA(state.otherPart)
  }
}
function doSomethingWithB(state, action) { ... }

function reducer(state = {}, action) {
  return {
    // Because you call them!
    a: processA(state.a, action),
    b: doSomethingWithB(state.b, action)
  };
}

// Not using the helper
let store = createStore(reducer);

Kamu melihat? Itu hanya fungsi memanggil fungsi. Tidak ada "barang yang dalam" ajaib.
Dan Anda juga dapat menggunakan combineReducers berkali-kali:

// Function names don't matter!
function processSomePartOfA(state, action) { ... }
function doSomethingWithOtherPartOfA(state, action) { ... }

/*
function processA(state, action) {
  return {
    somePart: processSomePartOfA(state.somePart),
    otherPart: doSomethingWithOtherPartOfA(state.otherPart)
  }
}
*/
let processA = combineReducers({
  somePart: processSomePartOfA,
  otherPart: doSomethingWithOtherPartOfA
});

function processA(state, action) { ... }
function doSomethingWithB(state, action) { ... }

/*
function reducer(state = {}, action) {
  return {
    a: processA(state.a, action),
    b: doSomethingWithB(state.b, action)
  };
}
*/
let reducer = combineReducers({
  a: processA,
  b: doSomethingWithB
});

let store = createStore(reducer);

Satu-satunya bagian di mana nama fungsi penting adalah ketika Anda menggunakan export + import * as untuk "mendapatkan" objek yang Anda berikan ke combineReducers karena _itulah cara kerja import * ! Itu menempatkan sesuatu di objek berdasarkan kunci ekspor mereka.

Saya pikir kesalahan terbesar saya di sini adalah menganggap pembaca akrab dengan ekspor bernama.

Saya pikir kesalahan terbesar saya di sini adalah menganggap pembaca akrab dengan ekspor bernama.

Saya pikir, asumsi pembaca akrab dengan ES6 sama sekali adalah peregangan. Tapi itulah yang mendorong orang untuk belajar dan memikirkan hal ini. Jadi sebenarnya adalah hal yang baik ketika membaca di depan pengetahuan dan pengalaman pembaca.

Kami mengubah contoh untuk memanggil combineReducers secara eksplisit di reducers/index jadi semoga mulai sekarang lebih masuk akal: https://github.com/gaearon/redux/pull/473

Penutupan, karena ini tampaknya lebih baik ditangani dalam dokumen saat ini.
Dan kami juga tidak menggunakan import * di dokumen.

Apakah Anda benar-benar berpikir bahwa menanamkan perilaku implisit seperti itu adalah praktik pengkodean yang baik?

Bagi saya itu mengaburkan kode dan menggabungkanReducer seharusnya tidak ada, itu menambahkan langkah abstraksi yang tidak perlu dan memperumit proses.

Ketika Anda menulis kerangka kerja, fitur penting seperti ini harus mudah dimengerti, itu jelas tidak terjadi, misalnya perasaan "ajaib".

PS: Saya berasal dari dokumentasi Redux resmi: "Ini bukan sihir"

Apakah halaman ini membantu?
0 / 5 - 0 peringkat