redux supermodel

redux-ซูเปอร์โมเดล

ปรับปรุงความพยายามในการสื่อสารระหว่าง Redux Store และ API ที่คล้ายกับ REST นี่คือแพ็คเกจของฟังก์ชันตัวสร้างการดำเนินการและตัวลดที่สร้างขึ้นด้วย axios และ redux-promise-middleware ที่จัดการการจัดการสถานะทรัพยากรสำหรับคุณ... สิ่งที่คุณต้องมีคือ URL!

ตรวจสอบการสาธิต

การอ้างอิง API

การสร้างไคลเอนต์

ไคลเอนต์สรุป API ที่คุณใช้งานอยู่ คุณสามารถสร้างไคลเอนต์ใหม่ได้โดยระบุ URL พื้นฐานสำหรับ API

 นำเข้า { createClient } จาก 'redux-supermodel'const client = createClient('https://example.com/api/v1')

การสร้างทรัพยากร

ภายในไคลเอนต์ของคุณ คุณสามารถเริ่มกำหนดทรัพยากรได้ ทรัพยากรแต่ละรายการแสดงถึงจุดสิ้นสุดที่คุณสามารถโต้ตอบได้

 // URL แบบเต็มจะเป็น https://example.com/api/v1/blogsconst blogs = client('blogs')// https://example.com/api/v1/commentsconst comment = client('comments' )

การแนบอุปกรณ์ประกอบฉากของทรัพยากรของคุณเข้ากับส่วนประกอบของคุณ

เริ่มต้นด้วยคำจำกัดความทรัพยากรของคุณ สมมติว่า http://example.com/api/posts/latest จะส่งคืนออบเจ็กต์ JSON พร้อมด้วย title คุณสมบัติและ body

 // resources.jsimport { createClient } จาก 'redux-supermodel'const client = createClient('http://example.com/api')// GET http://example.com/api/posts/latest/// / { title: 'โพสต์บล็อกล่าสุดของฉัน', body: 'สวัสดีชาวโลก!' } ส่งออก const post = ลูกค้า ('โพสต์', { url: 'โพสต์/ล่าสุด' }) post.fetch()

คุณสามารถใช้ connect ส่วนประกอบที่มีลำดับสูงกว่าเพื่อแนบสถานะทรัพยากรของคุณเข้ากับส่วนประกอบของคุณและเชื่อมโยงผู้สร้างการดำเนินการใดๆ ที่คุณต้องการใช้ โดยส่วนใหญ่แล้ว คุณจะดึงข้อมูลบางอย่างออกมาเมื่อส่วนประกอบประกอบเข้าด้วยกัน หากนี่เป็นส่วนประกอบเดียวที่จะใช้ทรัพยากร คุณสามารถรีเซ็ตได้เมื่อส่วนประกอบยกเลิกการต่อเชื่อม โดยปกติแล้ว create และ update การดำเนินการ ผู้สร้างจะเชื่อมโยงกับปุ่มหรือตัวจัดการส่งในแบบฟอร์มของคุณ

 // MyComponent.jsimport React, { Component } จาก 'react'import { เชื่อมต่อ } จาก 'react-redux'import { post } จาก './resources'export class MyComponent ขยาย Component {
  async componentDidMount() { ลอง { const res = await this.props.fetchPost()
        // ผู้สร้างแอคชั่น AJAX คือคำมั่นสัญญา ดังนั้นคุณสามารถรอให้พวกเขา // จัดการกับข้อผิดพลาดหรือดำเนินการบางอย่างหลังจากเสร็จสิ้น  console.log(res)} catch (error) { // redux-supermodel จะติดตามสถานะข้อผิดพลาดสำหรับคุณ แต่ // คุณสามารถทำสิ่งของคุณเองได้  alert('มีเรื่องเลวร้ายเกิดขึ้น!')}
  -

    // หากคุณเคยเข้าถึงทรัพยากรภายในบริบทขององค์ประกอบเดียวและ
  // ลูก ๆ ของมัน คุณสามารถรีเซ็ตทรัพยากรเมื่อยกเลิกการต่อเชื่อมเพื่อล้างสถานะ redux ของคุณ
  componentWillUnmount = () => this.props.resetPost()

  render() {const { เริ่มต้น, ข้อผิดพลาด, หัวเรื่อง, เนื้อความ, fetchPost } = this.propsif (! เริ่มต้น) { ถ้า (ข้อผิดพลาด) {return <div className="error">{error.message}</div> } อื่น ๆ {return <div className="loading">กำลังโหลด...</div>
       }}ส่งคืน ( <div><h1>{title}</h1><div className="body"> {body}</div><div className="error"> {error.message}</div>< ประเภทปุ่ม = "ปุ่ม" onClick={fetchPost}>รีเฟรช</button> </div>)
  }} ฟังก์ชันส่งออก mapProps (สถานะ) {
  const { พร้อม ข้อผิดพลาด เพย์โหลด } = โพสต์ (สถานะ)
  const { data: { title, body } = {} } = เพย์โหลด
  กลับ { พร้อม ข้อผิดพลาด หัวเรื่อง เนื้อหา }} การกระทำ const = {
   fetchPost: () => post.fetch({ id: 'ล่าสุด' }),
  resetPost: post.reset,} ส่งออกการเชื่อมต่อเริ่มต้น (mapProps, การดำเนินการ) (MyComponent)

เพย์โหลดอาจเป็นออบเจ็กต์ขนาดใหญ่ที่มีข้อมูลจำนวนมากเกี่ยวกับคำขอและการตอบกลับ HTTP ซึ่งส่วนใหญ่คุณไม่จำเป็นต้องใช้เมื่อคุณเรนเดอร์ส่วนประกอบของคุณ ดังนั้นฉันขอแนะนำให้ใช้การเรียก mapProps เพื่อลดความซับซ้อนของเพย์โหลดเหลือเพียง สิ่งที่คุณต้องการ พยายามหลีกเลี่ยงการใช้เพย์โหลดโดยตรง ลองอ่านโพสต์บล็อกนี้เพื่ออ่านเพิ่มเติม

สำหรับรายละเอียดเกี่ยวกับ mapProps โปรดอ่านเอกสารประกอบ react-redux Connect()

การติดตั้ง

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

คุณจะต้องเพิ่มมิดเดิลแวร์ redux-promise-middleware และตัวลด redux-supermodel ไปยัง Redux Store ของคุณ

 // store.jsimport { createStore, ApplyMiddleware, เขียน, CombineReducers } จาก 'redux'import PromiseMiddleware จาก 'redux-promise-middleware'import { ลดเป็นทรัพยากร } จาก 'redux-supermodel'const rootReducer = รวม Reducers ({ ทรัพยากร }) ส่งออก เขียนเริ่มต้น (applyMiddleware (promiseMiddleware ())) (createStore) (rootReducer)