redux supermodel

redux-supermodel

Sederhanakan upaya yang diperlukan untuk berkomunikasi antara Redux Store dan API mirip REST. Ini adalah paket fungsi dan reduksi pembuat tindakan yang dibuat dengan aksio dan redux-promise-middleware yang menangani manajemen status sumber daya untuk Anda... yang Anda perlukan hanyalah URL!

Lihat demonya

Referensi API

Membuat Klien

Klien merangkum API yang Anda gunakan. Anda dapat membuat klien baru dengan memberikan URL dasar untuk API.

 impor { createClient } dari 'redux-supermodel'const client = createClient('https://example.com/api/v1')

Menciptakan Sumber Daya

Di dalam klien Anda, Anda dapat mulai menentukan sumber daya. Setiap Sumber Daya mewakili titik akhir yang dapat Anda gunakan untuk berinteraksi.

 // URL lengkapnya adalah https://example.com/api/v1/blogsconst blogs = client('blogs')// https://example.com/api/v1/commentsconst comments = client('comments' )

Melampirkan props Sumber Daya Anda ke Komponen Anda

Mulailah dengan definisi sumber daya Anda, anggap saja http://example.com/api/posts/latest akan mengembalikan objek JSON dengan properti title dan body .

 // resources.jsimport { createClient } dari 'redux-supermodel'const client = createClient('http://example.com/api')// DAPATKAN http://example.com/api/posts/latest/// / { title: 'Entri blog terbaru saya', isi: 'Halo, dunia!' }ekspor const post = klien('posting', { url: 'postingan/terbaru' }) post.fetch()

Anda dapat menggunakan connect Komponen Tingkat Tinggi untuk melampirkan status sumber daya ke komponen Anda dan mengikat pembuat tindakan apa pun yang ingin Anda gunakan. Seringkali, Anda akan mengambil sesuatu saat komponen dipasang. Jika ini adalah satu-satunya komponen yang akan menggunakan sumber daya, Anda dapat meresetnya saat komponen dilepas. Biasanya pembuat tindakan create dan update akan terikat pada tombol atau kirimkan penangan di formulir Anda.

 // MyComponent.jsimport React, { Component } dari 'react'import { connect } dari 'react-redux'import { post } dari './resources'export class MyComponent extends Component {
  async komponenDidMount() { coba { const res = tunggu ini.props.fetchPost()
        // Pembuat tindakan AJAX adalah janji, jadi Anda dapat menunggunya untuk // menangani kesalahan atau melakukan sesuatu setelah kesalahan tersebut selesai.  console.log(res)} catch (error) { // redux-supermodel akan melacak status kesalahan untuk Anda, tetapi // Anda juga dapat melakukan hal Anda sendiri.  alert('Sesuatu yang buruk telah terjadi!')}
  }

    // Jika Anda hanya mengakses sumber daya dalam konteks satu komponen dan
  // anak-anaknya, Anda dapat mengatur ulang sumber daya saat unmount untuk membersihkan status redux Anda.
  komponenWillUnmount = () => this.props.resetPost()

  render() {const { diinisialisasi, kesalahan, judul, isi, ambilPost } = this.propsif (!diinisialisasi) { if (kesalahan) {return <div className="error">{error.message}</div> } else {return <div className="loading">Memuat...</div>
       }}kembali ( <div><h1>{title}</h1><div className="body"> {body}</div><div className="error"> {error.message}</div>< button type="button" onClick={fetchPost}>Segarkan</button> </div>)
  }}fungsi ekspor mapProps (negara bagian) {
  const { siap, error, payload } = post(status)
  const { data: { judul, isi } = {} } = muatan
  return { siap, kesalahan, judul, isi }}tindakan const = {
   ambilPost: () => posting.ambil({ id: 'terbaru' }),
  resetPost: post.reset,}ekspor koneksi default(mapProps, tindakan)(Komponen Saya)

Payload bisa berupa objek besar yang berisi banyak informasi tentang permintaan dan respons HTTP, yang sebagian besar tidak akan Anda perlukan saat merender komponen Anda, jadi saya sarankan menggunakan panggilan mapProps untuk menyederhanakan payload menjadi hanya barang yang Anda perlukan. Cobalah untuk menghindari penggunaan payload secara langsung. Lihat posting blog ini untuk membaca lebih lanjut.

Untuk detail tentang mapProps, baca dokumentasi react-redux connect().

Instalasi

npm install --save redux-supermodel redux-promise-middleware

Anda perlu menambahkan middleware redux-promise-middleware dan peredam redux-supermodel ke Redux Store Anda.

 // store.jsimport { createStore, applyMiddleware, composer, mergeReducers } dari 'redux'import janjiMiddleware dari 'redux-promise-middleware'import { peredam sebagai sumber daya } dari 'redux-supermodel'const rootReducer = mergeReducers({ resource })ekspor penulisan default(applyMiddleware(promiseMiddleware()))(createStore)(rootReducer)