Redux: Contoh dunia nyata (termasuk CRUD, pola lanjutan, dll)

Dibuat pada 2 Feb 2016  ·  45Komentar  ·  Sumber: reduxjs/redux

Awalnya terinspirasi oleh tweet Dan .

TL;DR - Kami ingin mendanai pembuatan/peninjauan kode/pedagogi aplikasi Redux lengkap yang mencakup kasus penggunaan dunia nyata yang akan dihosting di repo ini serta kursus Thinkster.io . Teks & kode kursus akan menjadi open source (kami berpikir CC & MIT, masing-masing) sehingga pengetahuan ini tidak akan terkunci di balik paywall.

Menulis contoh kaya membutuhkan banyak waktu dan membutuhkan titik akhir API yang dapat ditulis (antara lain). Namun, itu adalah sesuatu yang saya rasa sangat penting untuk memastikan para pengembang memiliki kerangka acuan yang baik saat membangun aplikasi mereka. Kami juga memiliki banyak sekali pengguna yang meminta primer semacam ini di Redux, dan karena itu, kami dengan senang hati mendanai pembuatannya.

Akan senang mendengar ide apa pun yang Anda miliki tentang ini dan lmk jika Anda tertarik untuk mengerjakannya!

examples

Komentar yang paling membantu

Saya ingin memiliki contoh CRUD resmi yang menangani:

  • Autentikasi
  • Normalisasi
  • Pembaruan yang optimis
  • Pengeditan lokal
  • hubungan entitas
  • paginasi

Jika Anda ingin membangun kursus di sekitar ini, itu luar biasa. Namun saya pikir penting bahwa contoh itu sendiri dikontribusikan ke repo ini sehingga kami dapat mempertahankannya dan tetap up to date dengan perubahan terbaru. Oleh karena itu harus konsisten dengan sistem build dan konvensi yang kita gunakan dalam contoh yang ada.

Apakah ini masuk akal?

Semua 45 komentar

Saya ingin memiliki contoh CRUD resmi yang menangani:

  • Autentikasi
  • Normalisasi
  • Pembaruan yang optimis
  • Pengeditan lokal
  • hubungan entitas
  • paginasi

Jika Anda ingin membangun kursus di sekitar ini, itu luar biasa. Namun saya pikir penting bahwa contoh itu sendiri dikontribusikan ke repo ini sehingga kami dapat mempertahankannya dan tetap up to date dengan perubahan terbaru. Oleh karena itu harus konsisten dengan sistem build dan konvensi yang kita gunakan dalam contoh yang ada.

Apakah ini masuk akal?

Saya juga ingin melihat di mana orang mengambil data dari API.

@gaearon konten/kode akan open source, jadi tidak masalah. Kami hanya akan meminta tautan kembali ke kami di suatu tempat di halaman :) (edit - menggunakan sistem/konvensi build yang ada lebih disukai untuk kami juga)

@sebastiandeutsch dapatkah Anda menjelaskan sedikit tentang ini?

Beberapa waktu yang lalu saya mulai bermain-main dengan menulis pengelola kata sandi menggunakan react+redux, monogram , dan eccrypto . Simpan kata sandi dan bagikan semuanya tanpa pernah mengirimnya melalui kabel dalam bentuk tidak terenkripsi menggunakan ECIES. Tidak pernah benar-benar menyelesaikannya, tetapi itu bisa memuaskan semua item di https://github.com/rackt/redux/issues/1353#issuecomment -178760036 . Apakah itu terdengar menarik?

@vkarpov15

Ini memang terdengar sangat menarik tetapi saya khawatir ini terlalu spesifik untuk domain. Kebanyakan orang ingin melihat contoh CRUD umum (daftar item yang dapat diedit yang dapat ditautkan ke salah satu item, dll), dan saya khawatir fokus kripto mungkin membuat contoh kurang mudah didekati.

Saya sangat tertarik pada pengeditan lokal/luring dengan pembaruan optimis, saya punya waktu tetapi saya tidak begitu berpengalaman dengan aplikasi redux, saya hanya mendapatkan aplikasi asli yang kompleks, tetapi hampir sepenuhnya lokal/offline.
Mungkin kita bisa menulis repo dan mengerjakannya dan berdiskusi secara bertahap?
Juga bagaimana dengan aplikasi "modular"?
Hanya untuk berbagi beberapa ide, saya menuliskan beberapa ide tentang Bagaimana menurut saya aplikasi offline pertama seharusnya, cobalah jika Anda punya waktu untuk dihabiskan di dalamnya! :)

https://github.com/jsforum/jsforum/issues/7

Tidak yakin seberapa luas masalahnya dan apa tingkat target pengembang untuk kursus ini, tetapi saya ingin melihat di suatu tempat di internet bagaimana merancang komponen aplikasi kompleks yang diimplementasikan dalam react+redux (seperti formulir multi-langkah atau wizard dengan keadaan dikendalikan oleh beberapa reduksi) sehingga dapat digunakan kembali secara keseluruhan di aplikasi lain.

@sompylasar Silakan membuat masalah tentang ini di repo React Redux. Saya senang mendiskusikan pendekatan untuk menggunakan kembali atau mengisolasi komponen yang sadar Redux di sana.

Jika Anda mencari contoh mentah tingkat pemula, selalu ada todo-mvc dan tutorial "memulai babel+redux+react+webpack" di luar sana. Saya tidak yakin ada banyak nilai untuk yang lain, saya akhirnya membaca beberapa posting blog baru tentang masalah ini setiap minggu (tapi mungkin Anda bisa membuat aplikasi yang secara otomatis menghasilkan tutorial ini? :p ). Saya berpendapat bahwa tutorial tingkat menengah akan lebih bermanfaat, dan pembelajaran IMO tentang crypto bisa menjadi manfaat sampingan yang menarik.

Saya tidak mencari contoh tingkat pemula, tetapi bagian kompleks CRUD (paginasi, normalisasi, pembaruan optimis, hubungan) harus menjadi fokus contoh.

Apakah ini akan menggunakan kustom atau API yang sudah ada? Atau kombinasi?

Ini adalah pertanyaan yang sulit. Saya tidak tahu. Github API mungkin merupakan ide yang bagus karena dapat ditulisi dan konsepnya familiar bagi semua orang. Saya tahu @ryanflorence mengerjakan sesuatu yang serupa.

Pasti menargetkan dev tingkat menengah dengan ini; tuts pemula telah jenuh dan jarang membahas topik (dunia nyata) yang lebih sulit Dan yang tercantum di atas.

Saya terbuka untuk API khusus dan/atau yang sudah ada - kami akan dengan senang hati meng-host API khusus apa pun di akun aws kami. Kami juga memiliki API lengkap untuk klon Medium.com yang sedang kami bangun untuk beberapa kursus lain yang dapat kami gunakan, kode sumber backend juga akan tersedia untuk itu jika orang-orang penasaran. Senang berbagi detail jika itu terdengar menarik.

@EricSimons Saya ingin tahu lebih banyak tentang klon Medium.

@cshenoy Pasti . Kami sedang membangun kursus JS fullstack yang akan memiliki React/Redux sebagai frontend dan Node sebagai backend. Kami akan memiliki API backend yang dihosting secara independen untuk orang-orang yang tidak ingin menjalankannya secara lokal, jadi mungkin cocok untuk mengajarkan beberapa topik yang lebih kompleks di atas. Kumpulan fitur untuk klon Medium mencakup yang berikut:

  • Otentikasi (email/pass & oAuth, JWT)
  • CRUD untuk posting blog & komentar di posting blog
  • Mengikuti pengguna
  • Umpan global semua blog & umpan blog pengguna yang Anda ikuti
  • Sistem penandaan
  • Profil pengguna/mengedit info profil

ETA pada basis kode terakhir adalah pada akhir minggu ini, jadi saya akan memiliki lebih banyak info saat itu. Kami telah merancang semuanya menjadi super modular, jadi menambahkan fitur tambahan akan menjadi hal yang sepele.

Timesheets (pelacak waktu) benar-benar melatih banyak aspek kompleks dari fluks/redux dan mentah. Pagination dan cacheing adalah kebutuhan yang jelas saat Anda menggulir berhari-hari dan berminggu-minggu bolak-balik. Ada juga banyak API yang dapat ditulisi yang sudah ada. Ada lebih dari sekadar pelacakan waktu yang terlibat juga. Manajemen pengguna, entitas proyek, dll.

Saya pikir ini akan bagus. Saya sedikit kesulitan dengannya, terutama bagian pembuatannya. Misalnya Anda memiliki komponen ArticlePage yang membuat artikel baru seperti ini:

// shortened version

import { addArticle } from '../actions'

function doAddArticle(props, handleAdded, values, dispatch) {
  props.addArticle(values)
  .then(handleAdded)
}

class AddArticlePage extends Component {
  handleAdded = () => {
    this.props.pushState(null, '/articles/')
  };

  render() {
    return (
      <div>
        <ArticleForm submit={(values, dispatch) => doAddArticle(this.props, this.handleAdded, values, dispatch)} />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {}
}

export default connect(mapStateToProps, {
  pushState,
  addArticle
})(AddArticlePage)

  1. Saya bahkan tidak yakin apakah itu hal yang "benar" untuk dilakukan untuk memutus janji yang telah diselesaikan untuk melakukan pengalihan.
  2. Bagaimana jika saya ingin mendapatkan ID dari artikel yang baru dibuat dan alih-alih mengarahkan ke halaman indeks, saya ingin mengarahkan ulang ke halaman /articles/{id}/ ?
  3. Bagaimana jika komponen saya menginginkan hasil dari tindakan async? Bagi saya, ini muncul dalam komponen ArticleForm saya dengan bidang formulir unggah gambar: Saya mengirimkan tindakan "addImage" dan ketika gambar telah dimuat, saya ingin 1) menampilkan pratinjau gambar yang diunggah berdasarkan URL dan 2) ingin tetapkan URL ke formulir. Tapi, saya merasa sulit untuk mencari tahu apa cara terbaik untuk melakukan ini di Redux. Masalah yang saya temukan adalah Anda harus dapat memetakan status/gambar yang baru ditambahkan ke prop dalam komponen formulir, tetapi 1) bagaimana Anda mendapatkan gambar yang baru ditambahkan dan 2) bagaimana jika ada 2 gambar yang diunggah secara bersamaan, bagaimana apakah Anda mendapatkan URL gambar yang tepat untuk komponen yang tepat?

Memang, saya baru menggunakan Redux selama beberapa bulan jadi itu mungkin masalah yang konyol, tetapi sebagai pemula mereka pasti membuat saya tersandung dan saya masih tidak merasa solusi saya adalah "cara yang benar".

@jonathaningram apakah Anda sudah melihat redux-thunk sama sekali? Sebagai alternatif dari apa yang Anda lakukan di atas, itu akan memungkinkan Anda mengirim dari dalam tindakan Anda

@babsonmatt ya saya sudah menggunakannya. Saya mendasarkan aplikasi dari contoh dunia nyata yang menggunakannya. Mungkin saya tidak menggunakannya dengan kemampuan penuhnya.

@jonathaningram Terima kasih atas contoh Anda. Seperti yang ditunjukkan, Anda harus memindahkan logika pengalihan ke thunk pembuat tindakan, dan mengirimkan pembaruan rute dari sana. Ada lebih banyak cara untuk mengelola efek samping (pengalihan adalah efek samping dari transisi status yang disebabkan oleh tindakan itu), seperti redux-saga atau efek samping redux. Tapi saya pikir diskusi mendalam di luar cakupan masalah ini.

@sompylasar terima kasih. Yap saya tidak ingin mengalihkan masalah tetapi hanya ingin berbagi pengalaman "dunia nyata" saya sebagai pemula redux yang semoga membantu contoh-contoh baru yang muncul dari masalah ini.

@EricSimons Saya tertarik untuk membantu. Saat ini saya memelihara aplikasi CRUD menggunakan nuklir-js dan saya pikir banyak dari ide itu akan diterjemahkan dengan baik ke redux. Beri tahu saya jika Anda ingin bertukar pikiran.

Saya baru-baru ini memulai proyek untuk manajemen status CRUD (over REST). Berasal dari Marionette/Backbone Saya benar-benar melewatkan konvensi REST ketika mulai menggali React/Redux.

https://github.com/masylum/resting-ducks

Saya tidak yakin apakah solusinya adalah contoh. Saya pikir perpustakaan bekerja lebih baik untuk itu. Manajemen negara hampir selalu sama, pada tahun 2016 kita seharusnya tidak menulis kode CRUD tetapi fokus pada logika bisnis kita.

@EricSimons Saat ini saya sedang mengevaluasi berbagai opsi di mana harus menentukan kebutuhan data dan kapan harus mengambil data. Salah satu opsi adalah mengimplementasikan sesuatu Relayish - tetapi saya merasa itu sedikit berlebihan. Sesuatu yang saya buat untuk sebuah proyek adalah menentukan kebutuhan pemuatan saya di rute dengan atribut loader:

let routes = <Route path='/' component={Layout}>
  <IndexRoute component={BooksIndex} />
  <Route path='/book/new' component={BooksNew} />
  <Route path='/book/:id' component={BooksShow} loader={BooksLoader} />
  <Route path='/book/:id/edit' component={BooksEdit} loader={BooksLoader} />
</Route>;

BooksLoader adalah kelas yang mengimplementasikan dua fungsi:

  • needToSyncStore(params, store) mengembalikan nilai true jika toko perlu disinkronkan, jika tidak salah
  • syncStore(params, store) akan menyinkronkan toko dan mengembalikan janji

Berikut adalah contoh implementasi yang sangat mendasar yang pasti dapat diganti dengan sesuatu yang lebih pintar (mis. ImmutableJS/Peta):

import _ from 'lodash';
import * as Actions from 'actions';
import API from 'api';

export default class BooksLoader {
  needsToSyncStore(params, store) {
    let books = store.getState().books;

    if(books) {
      const book = _.findWhere(books.collection, { isbn: params.id });
      if(book) {
        return false;
      }
    }

    return true;
  }

  syncStore(params, store) {
    let { dispatch } = store;
    let api = new API();

    let loadBooks = Actions.loadBooks();
    return loadBooks(dispatch, store.getState);
  };
}

Idenya adalah bahwa loader hanya peduli dengan status yang disediakan oleh rute dan pohon status redux yang membuatnya mudah untuk diuji.

Bagian berikutnya adalah pemuat toko yang merupakan komponen reaksi yang sangat terinspirasi oleh @ryanflorence AsyncProps (https://github.com/rackt/async-props) yang dapat digunakan sebagai RenderContext dari ReactRouter: https://Gist.github. com/sebastiandeutsch/e6148ca0741cc355248c

Ini sedang memeriksa rute ReactRouter untuk loader dan menjalankannya. Itu juga memperlihatkan status pemuatan melalui konteks. Dalam tindakan itu akan terlihat seperti ini:

<Provider store={store}>
  <Router
    history={browserHistory}
    render={(props) => (
      <StoreLoader {...props} store={store} />
    )}>
      {routes}
    </Router>
</Provider>

Dalam komponen rute (ini adalah komponen khusus yang merupakan turunan langsung dari router) saya dapat menggunakan konteks seperti ini:

export class BooksShow extends React.Component {
  static contextTypes = {
    storeIsSynchronized: React.PropTypes.bool
  };
  ...
  render() {
    const { book } = this.props;

    if(this.context.storeIsSynchronized) {
      /* display components */
    } else {
      /* display loading spinner */
    }
}

export default connect(
  (state, props) => {
    return {
      book: _.findWhere(state.books.collection, { isbn: props.params.id } )
    }
  },
  (dispatch) => ({
    actions: bindActionCreators(Actions, dispatch)
  })
)(BooksEdit);

@gaearon Apa pendapat Anda tentang ide-ide ini?

@sebastiandeutsch Saya suka pendekatan itu. Saya juga sedang bereksperimen dengan Async-Props, ide Anda di sini terlihat sangat keren.

Saya membayangkan contoh itu seharusnya lebih umum daripada disesuaikan dengan abstraksi untuk pengambilan data. Saya sangat suka https://github.com/optimizely/nuklear-js/tree/master/examples/rest-api sebagai contoh dasar cara mudah untuk menyiapkan penyimpanan dan tindakan untuk Rest API.

Saya telah memperluasnya untuk mendukung cache dan bahkan menyimpan permintaan yang sedang berlangsung di toko (sehingga jika permintaan dibuat lagi, pemanggil hanya mendapat penundaan alih-alih memulai kembali xhr. Contoh yang lebih kuat dari apa yang saya bicarakan ada di sini : https://github.com/jordangarcia/nuclear-api-module-example/tree/master/rest_api. Dan saya telah menyalin beberapa konsep @jordangarcia dengan sukses besar. Saya pikir pendekatan di sini dapat bekerja dengan baik redux juga (disertai dengan normalizr dll).

@EricSimons apakah masalahnya lebih banyak tentang materi pelajaran dan menemukan API yang dapat ditulis dengan baik atau apakah Anda mencari pendekatan khusus?

Saya sebagian besar tertarik pada materi pelajaran (karena kasus terburuk kami dapat meng-host API kami yang dapat ditulisi untuk digunakan orang-orang). Terima kasih banyak untuk semua komentator di atas btw, diskusi ini sejauh ini fantastis. Akan senang mendengar lebih banyak pemikiran/ide tentang apa yang harus kita bahas dalam contoh-contoh ini.

FYI @dan-weaver & orang lain yang tertarik untuk mengerjakan ini - jangan ragu untuk memberi saya catatan [email protected]

Di dunia Meteor, ada satu contoh proyek open source besar yang berasal dari buku tentang Meteor. Proyek ini adalah Telescope , yang merupakan aplikasi web yang mirip dengan Reddit atau Hacker News. Jika Redux memiliki contoh serupa, itu akan bagus. Banyak pengembang mempelajari Meteor dengan mengikuti buku dan membangun versi Teleskop yang lebih kecil bersamanya. Aplikasi seperti Telescope akan mencakup semua topik yang diangkat oleh Dan pada aplikasi yang sebagian besar pengembang sudah kenal (karena Hacker News, Reddit, ..).

Saya mulai membuat dasar untuk aplikasi serupa beberapa bulan yang lalu di webapp *. Proyek ini memiliki proses pembuatan, modul css, otentikasi, server terpisah untuk API, MongoDB, rendering sisi server, GraphQL, dan banyak lagi yang sudah disiapkan (walaupun beberapa hal mungkin agak ketinggalan zaman, perlu beberapa pekerjaan lagi, atau dapat dilakukan lebih baik). Lebih lanjut memiliki pemisahan peredam, sesuatu yang saya yakin tidak ada contoh lain. Hal-hal besar yang kurang adalah solusi yang baik untuk pengambilan data, pembaruan optimis, data waktu nyata. Juga, ini agak ketinggalan jaman karena 2 bulan tampak seperti keabadian dalam seberapa cepat semuanya berkembang sekarang :)

Jika Anda ingin titik awal untuk membuat contoh untuk kursus, mungkin _webapp_ bisa menjadi inspirasi. Dan saya ingin melihat sesuatu yang mirip dengan Teleskop dilakukan di Redux.

*_Folder knowhow berisi beberapa informasi tentang arsitektur/keputusan yang dibuat._


_Sidenote:_ Karena saya perhatikan Redux tidak memiliki cerita untuk pengambilan data, saat ini saya membuat sistem yang mirip dengan Relay yang terintegrasi dengan Redux. Itulah alasan saya belum memperbarui _webapp_ selama 2 bulan. Jika saya berhasil membuat sistem itu, saya akan melanjutkan _webapp_ dengannya.

Satu masalah yang dihadapi adalah bahwa Redux adalah level yang sangat rendah dan oleh karena itu cukup tidak berpendapat tentang bagaimana Anda _sebenarnya_ membangun aplikasi di sekitarnya. Oleh karena itu saya tidak yakin apakah kita dapat mempertahankan _one_ contoh basis kode untuk dipelajari karena ada begitu banyak kemungkinan abstraksi yang valid _antara_ redux dan antarmuka pengguna akhir. Ini dicontohkan oleh beberapa diskusi di utas ini di mana banyak kemungkinan berbeda untuk pemuatan data disajikan tanpa pemenang yang jelas - tidak ada satu cara yang benar karena skala aplikasi sangat berbeda.

Untuk alasan ini datang dengan "_The_ Advanced TODOMVC of Redux" ke spesifikasi yang membutuhkan semua fitur canggih Dan telah disebutkan sebelumnya diinginkan.

Saat kita bergerak maju, saya yakin kita akan mulai melihat lebih banyak abstraksi/perpustakaan/kerangka _around_ Redux yang dapat menggunakan aplikasi canggih ini sebagai bukti konsep. Bahkan seiring waktu, ini dapat diubah namanya menjadi non-Redux spesifik.

Di depan API saya ingin melihatnya mengikuti semacam standar ( JSON-API Memberikan dasar yang sangat baik untuk denormalisasi dan menggambarkan hubungan) dan akhirnya memiliki server GraphQL di depan ini.

Adapun bagaimana ini disusun sebagai komunitas, saya menduga kita dapat memiliki repo inti yang berisi spesifikasi aplikasi, implementasi server serta daftar/bagan perbandingan semua implementasi saat ini.


Di samping, tetapi sebagian terkait, perhatikan dari topik spesifik di sini, saya pikir sebaiknya kita memprioritaskan masalah ini untuk memperjelas ruang lingkup Redux - menekankan sifat tingkat rendah.

hal. Saya memiliki pembicaraan "Real World Redux" yang akan segera hadir di React London (di mana saya berharap akan mendapatkan waktu untuk menjelajahi masalah yang lebih maju) jadi perhatikan itu: D

Saya siap untuk mengerjakan ini, saya pikir menyediakan pendatang baru dengan aplikasi Redux yang dapat digunakan, dikomentari, dan dijelaskan yang bukan daftar tugas adalah ide bagus. Apakah ada pekerjaan yang sudah dimulai @EricSimons?

Tampaknya ada banyak pertanyaan serupa tentang cara mengurangi boilerplate redux dan membangun sesuatu yang nyata dengannya. Saya pikir saya menemukan solusi yang cukup bagus (antara lain) yang saya tulis di sini:

https://medium.com/@timbur/react -automatic-redux-providers-and-replicators-c4e35a39f1

TL;DR: Anda dapat membuat penyedia redux yang secara otomatis mencocokkan dirinya sendiri dengan komponen Anda berdasarkan propTypes . Yang Anda butuhkan hanyalah direktori components , direktori providers , dan direktori themes opsional tetapi direkomendasikan. Semuanya mudah dipertukarkan, dimengerti, dipelihara, diperpanjang, dan dapat digunakan kembali. Ada banyak lagi yang disertakan dengan semua itu seperti hot reload baik klien dan server, rendering server, dll., dll., dll. Saya membangun aplikasi dari awal berdasarkan boilerplate yang disertakan sebelumnya hari ini dan butuh sekitar 10 menit dibandingkan dengan 1 jam biasanya akan memakan waktu. :)

Berbicara dari pengalaman sebagai pengadopsi reaksi awal, saya lebih suka tidak menggunakan API Github sebagai contoh.

  • Otentikasinya terlalu rumit untuk seseorang yang mencari sesuatu yang "berfungsi".
  • Itu tidak cocok untuk bereksperimen. Untuk menghindari destruktif saat melakukan mutasi API, saya harus membuat akun Github terpisah/sekali pakai.

Sebagai gantinya, harap gunakan API kustom sederhana. Kami tidak ingin bergantung pada pihak ke-3, dan memungkinkan siapa pun untuk menjalankan instance mereka sendiri seperti contoh BottledAPI (wip) saya di json-server .

Ini juga akan memungkinkan implementasi backend istirahat lainnya di Javascript, Java, C#, PHP, dll. Ini akan membantu memulai pengembangan, karena turn-key-nya yang cantik.

BTW dalam tautan di komentar saya di atas, ada detail tentang cara membuat aplikasi blog. Saya berencana menambahkan auth pengguna dan semua itu dalam minggu depan.

Hai kawan! Saya sedang mempelajari ReactJS dan saya mengembangkan versi penyingkat URL pribadi saya menggunakan React + Redux. Contoh saya menggunakan Gulp + Browserify + Babelify untuk pengembangan frontend. Saya menulis tes unit menggunakan Mocha dan Enzim untuk komponen dan tindakan. Contoh ini juga memiliki:

  • Buat, Baca, dan Perbarui operasi
  • Otentikasi dengan Json Web Token
  • paginasi
  • Tag
  • CORS

Ada beberapa bug di antarmuka dan kegunaan. Tapi itu berhasil =)
Mungkin seseorang dapat menggunakannya sebagai dasar untuk contoh dunia nyata.

Demo: https://gustavohenrique.github.io/gh1
Sumber: https://github.com/gustavohenrique/gh1

Saya menerima saran tentang cara meningkatkan contoh ini. Terima kasih!

Sedikit terlambat ke pesta, tetapi saya baru saja meluncurkan aplikasi web manajemen lengkap yang dibangun di atas Redux.

Kami menggunakan redux-thunk untuk pekerjaan async, dan menggunakan redux-ignore yang memberikan peningkatan yang mengejutkan (_di seluler_), hanya dengan memfilter reduksi tingkat atas kami.
Aplikasi webnya 100% responsif, jadi mudah digunakan/diuji di ponsel.

Kami mengelola pembaruan optimis dengan "mengembalikan" tindakan sebelumnya. Pereduksi yang terpengaruh tahu cara melacak jalan mereka kembali ke keadaan sebelumnya, jadi ini cukup terisolasi dan efisien.

Anyway, ini linknya http://www.handy-erp.com/en/
Cukup buat akun dan kalahkan diri Anda.

@SebastienDaniel Selamat! itu adalah situs web yang indah. Apakah Anda meletakkan bagian redux di repositori publik?

Terima kasih @gustavohenrique
Sayangnya tidak, sumbernya tidak ada dalam repo publik. Namun, saya cukup terbuka untuk menggunakan sumbernya untuk membantu menjawab pertanyaan apa pun atau mungkin membuat demo untuk membantu komunitas.

Saya sangat ingin melihat contoh modularitas. Jika Anda sedang membangun sebuah aplikasi dengan sejumlah besar fungsi, Anda benar-benar mencari cara untuk membangun modul tanggung jawab tunggal. Lebih baik untuk tim, lebih baik untuk perawatan.

Pertama, Terima kasih telah membagikan kode!@gustavohenrique
Hal-hal lain:
Saya pikir mungkin daftar pengguna? Gabung? daftar...
redux membutuhkan contoh-contoh ini!

Saya setuju dengan @gggin dan @EricSimons, versi siap produksi yang lengkap dari fitur-fitur ini akan luar biasa:

Otentikasi (email/pass & oAuth, JWT)
CRUD untuk posting blog & komentar di posting blog
Mengikuti pengguna
Umpan global semua blog & umpan blog pengguna yang Anda ikuti
Sistem penandaan
Profil pengguna/mengedit info profil

Selain itu, peran dasar atau sistem izin akan sangat bagus. Sesuatu yang setara dengan tim GitHub atau anggota Trello

Hei semuanya,

Saya telah mengerjakan proposal longgar untuk redux crud api hanya berdasarkan pengalaman saya selama beberapa minggu terakhir:

https://github.com/ppiekarczyk/redux-crud-api-middleware/blob/master/README.md

Umpan balik apa pun akan sangat dihargai. Terima kasih!

Saya bersedia mengambil aplikasi yang sedang saya bangun sekarang dan mengonversinya menjadi proyek contoh sumber terbuka juga.

Hai semuanya -- dengan senang hati kami umumkan bahwa contoh basis kode hampir siap untuk ditinjau. Ini sangat menyeluruh dan mencakup sebagian besar kasus penggunaan dunia nyata yang telah kita bicarakan di utas ini (auth, CRUD, pagination, dll). @vkarpov15 memiliki beberapa hal untuk diselesaikan, tetapi harus siap sekitar awal minggu depan.

Kami membutuhkan bantuan Anda untuk meninjau basis kode. Saya tahu @gaearon menyebutkan bahwa dia akan bersedia untuk melihatnya beberapa bulan yang lalu, dan setiap & semua umpan balik dari komunitas di sini akan sangat baik. Kami akan menggunakan repo ini untuk basis kode awal saat kami meninjau & mengulangi, lalu mensindikasikan final ke repo redux resmi setelah siap. Jangan ragu untuk membintangi/menonton, dan saya juga akan memposting pembaruan di utas ini setelah basis kode online & siap untuk ditinjau.

Senang menjawab setiap q & terima kasih kepada semua orang di sini untuk diskusi yang luar biasa!

Kedengarannya bagus. Pastikan untuk menambahkan sebutan dan tautan di pertanyaan FAQ Redux terkait jika sudah siap.

Seperti yang dijanjikan, basis kode siap untuk ditinjau di https://github.com/GoThinkster/redux-review , akan senang mendengar tanggapan semua orang. Masalah & PR selamat datang!

Hai teman-teman, terima kasih banyak untuk diskusi yang luar biasa dan memberikan contoh dunia nyata yang bagus ..

Hanya untuk menambah daftar contoh seperti itu, saya menemukan contoh ini https://github.com/andrewngu/sound-redux , demo yang berfungsi dikerahkan ke https://soundredux.io/. Tampaknya itu juga memenuhi kriteria yang dibicarakan oleh

Dan akhirnya, terima kasih khusus kepada @EricSimons untuk contoh dunia nyata yang mengagumkan.

Saya benar-benar menambahkan entri FAQ yang menunjuk ke sejumlah aplikasi React dan Redux dunia nyata, di http://redux.js.org/docs/faq/Miscellaneous.html#miscellaneous -real-projects . (Sebenarnya, saya tahu saya pernah melihat aplikasi Sound-Redux itu sebelumnya, tapi saya rasa saya belum menambahkannya ke daftar saya. Saya harus melakukannya.)

Saya akan melanjutkan dan menutup masalah ini dengan alasan bahwa sepertinya tidak ada lagi kebutuhan mendesak untuk menambahkan contoh yang lebih besar langsung ke repo Redux, mengingat jumlah aplikasi "nyata" di luar sana yang dapat kami arahkan ke. Jika seseorang ingin secara aktif menyumbangkan contoh spesifik ke repo, katakan sesuatu dan kami dapat membukanya kembali.

Dan ya, terima kasih kepada semua yang telah memberikan kontribusi diskusi dan contoh!

Apakah halaman ini membantu?
0 / 5 - 0 peringkat