Saya biasanya memposting hal-hal terkait kode di Stack, tetapi ini lebih merupakan pertanyaan tentang apa pendapat umum komunitas.

Tampaknya ada banyak orang yang menganjurkan penggunaan Redux dengan React untuk mengelola data / status, tetapi saat membaca dan mempelajari keduanya, saya menemukan sesuatu yang tidak terlihat benar.

Redux

Di bagian bawah halaman ini: http://redux.js.org/docs/basics/UsageWithReact.html (Melewati Store) merekomendasikan menggunakan "Magic" dari React 'Context'.

Salah satu opsinya adalah meneruskannya sebagai prop ke setiap komponen kontainer. Namun itu membosankan, karena Anda harus menyimpan kawat bahkan melalui komponen presentasi hanya karena mereka kebetulan membuat wadah jauh di dalam pohon komponen.

Opsi yang kami rekomendasikan adalah menggunakan komponen React Redux khusus yang dipanggil untuk secara ajaib membuat penyimpanan tersedia untuk semua komponen kontainer ...

Reaksi

Pada halaman Konteks React ( https://facebook.github.io/react/docs/context.html ) terdapat peringatan di bagian atas:

Konteks adalah fitur lanjutan dan eksperimental. API kemungkinan akan berubah dalam rilis mendatang.

Kemudian di bagian bawah:

Sama seperti variabel global sebaiknya dihindari saat menulis kode yang jelas, Anda harus menghindari penggunaan konteks dalam banyak kasus ...

Jangan gunakan konteks untuk meneruskan data model Anda melalui komponen. Memasukkan data Anda melalui hierarki secara eksplisit jauh lebih mudah untuk dipahami ...

Begitu...

Redux merekomendasikan penggunaan fitur React 'Context' daripada meneruskannya storeke setiap komponen melalui 'props'. Sementara React merekomendasikan yang sebaliknya.

Juga, tampaknya Dan Abramov (pencipta Redux) sekarang bekerja untuk Facebook (pencipta React), hanya untuk membuat saya semakin bingung.

• Apakah saya membaca semua ini dengan benar ..?
• Apa konsensus umum saat ini tentang masalah ini ..?

Konteks adalah fitur lanjutan dan dapat berubah. Dalam beberapa kasus, kemudahannya melebihi kerugiannya sehingga beberapa library seperti React Redux dan React Router memilih untuk mengandalkannya meskipun bersifat eksperimental.

Bagian penting di sini adalah perpustakaan kata . Jika konteks mengubah perilakunya, kami sebagai penulis perpustakaan perlu menyesuaikan . Namun, selama library tidak meminta Anda untuk menggunakan API konteks secara langsung, Anda sebagai pengguna tidak perlu khawatir tentang perubahannya.

React Redux menggunakan konteks secara internal tetapi tidak mengekspos fakta ini di API publik. Jadi, Anda seharusnya merasa jauh lebih aman menggunakan konteks melalui React Redux daripada secara langsung karena jika ada perubahan, beban pembaruan kode akan berada di React Redux dan bukan Anda.

Pada akhirnya, React Redux masih mendukung penyimpanan yang selalu lewat sebagai prop jadi jika Anda ingin menghindari konteks sepenuhnya, Anda memiliki pilihan itu. Namun saya akan mengatakan ini tidak praktis.

TLDR: Hindari menggunakan konteks secara langsung kecuali Anda benar-benar tahu apa yang Anda lakukan. Menggunakan pustaka yang kebetulan mengandalkan konteks secara internal relatif aman.

Saya tidak tahu tentang yang lain, tetapi saya lebih suka menggunakan dekorator penghubung react-redux untuk membungkus komponen saya sehingga hanya alat peraga dari toko yang saya butuhkan yang diteruskan ke komponen saya. Ini membenarkan penggunaan konteks dalam arti karena saya tidak mengonsumsinya (dan saya tahu, sebagai aturan, kode apa pun yang saya pimpin tidak akan mengkonsumsinya).

Saat saya menguji komponen saya, saya menguji komponen yang tidak dibungkus. Karena react-redux hanya melewati props yang saya butuhkan pada komponen itu, saya sekarang tahu persis props apa yang saya butuhkan saat menulis tes.

Saya kira intinya adalah, saya tidak pernah melihat konteks kata dalam kode saya, saya tidak mengkonsumsinya, jadi pada tingkat tertentu, itu tidak mempengaruhi saya! Ini tidak mengatakan apa-apa tentang peringatan "eksperimental" Facebook .. Jika konteksnya hilang, saya akan sama kacau seperti orang lain sampai Redux diperbarui.

Ada modul npm yang membuatnya sangat mudah untuk menambahkan redux ke konteks react

https://github.com/jamrizzi/redux-context-provider

https://www.npmjs.com/package/redux-context-provider

import React, { Component } from 'react';
import ReduxContextProvider from 'redux-context-provider';
import createStore from './createStore';
import actions from './actions';
import Routes from './routes';

export default class App extends Component {
  render() {
    return (
      <ReduxContextProvider store={store} actions={actions}>
        <Routes />
      </ReduxContextProvider>
    );
  }
}