redux supermodel

الإرجاع-عارضة الأزياء

قم بتبسيط الجهد الذي يتطلبه منك التواصل بين متجر Redux Store وواجهة برمجة التطبيقات المشابهة لـ REST. هذه عبارة عن حزمة من وظائف إنشاء الإجراءات ومخفضاتها التي تم إنشاؤها باستخدام المحاور والبرامج الوسيطة لوعد الإعادة التي تتعامل مع إدارة حالة المورد نيابةً عنك... كل ما تحتاجه هو عنوان URL!

تحقق من العرض

مرجع واجهة برمجة التطبيقات

إنشاء العميل

يقوم العملاء بتغليف واجهة برمجة التطبيقات (API) التي تستهلكها. يمكنك إنشاء عميل جديد من خلال توفير عنوان URL الأساسي لواجهة برمجة التطبيقات.

 استيراد { 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 comments = client('comments' )

إرفاق دعائم المورد الخاص بك بالمكون الخاص بك

ابدأ بتعريف المورد الخاص بك، ولنفترض أن http://example.com/api/posts/latest سيُرجع كائن JSON مع الخاصيتين title و body .

 // Resources.jsimport { createClient } from 'redux-supermodel'const client = createClient('http://example.com/api')// احصل على http://example.com/api/posts/latest/// / { العنوان: "أحدث مشاركة في مدونتي"، النص: "مرحبًا بالعالم!" }تصدير const post = client('post', { url: 'posts/latest' }) post.fetch()

يمكنك استخدام مكون connect العالي الترتيب لإرفاق حالة المورد الخاصة بك بالمكون الخاص بك وربط أي منشئي الإجراءات الذين تريد استخدامهم. في معظم الأحيان، سوف تقوم بإحضار شيء ما عندما يتم تركيب المكون. إذا كان هذا هو المكون الوحيد الذي سيستخدم المورد، فيمكنك إعادة تعيينه عند إلغاء تحميل المكون. عادةً ما يكون منشئو الإجراء الذي create update مرتبطين بالزر أو معالجات الإرسال في النموذج الخاص بك.

 // MyComponent.jsimport React, { Component } from 'react'import {connect } from 'react-redux'import { post } from './resources'export class MyComponent Extends Component {
  async ComponDidMount() { حاول { const res = انتظار this.props.fetchPost()
        // يعد منشئو إجراءات AJAX وعودًا، لذا يمكنك انتظارهم // للتعامل مع الأخطاء أو القيام بشيء ما بعد الانتهاء.  console.log(res)}catch (error) { // ستتتبع العارضة الخارقة redux حالة الخطأ لك، ولكن // يمكنك أيضًا القيام بالشيء الخاص بك.  تنبيه ("حدث شيء سيء!")}
  }

    // إذا لم تتمكن من الوصول إلى أحد الموارد إلا في سياق مكون واحد و
  // أطفاله، يمكنك إعادة تعيين المورد عند إلغاء التحميل لتنظيف حالة الإعادة الخاصة بك.
  مكونWillUnmount = () => this.props.resetPost()

  render() {const {Initized, error, title, body, fetchPost } = this.propsif (!initialized) { if (error) {return <div className="error">{error.message}</div> } else {return <div className="loading">جارٍ التحميل...</div>
       }}return ( <div><h1>{title}</h1><div className="body"> {body}</div><div className="error"> {error.message}</div>< زر type="button" onClick={fetchPost}>تحديث</button> </div>)
  }} وظيفة التصدير MapProps (الحالة) {
  const { جاهز، خطأ، حمولة } = منشور (حالة)
  const { data: { title, body } = {} } = payload
  إرجاع {جاهز، خطأ، عنوان، نص }}إجراءات ثابتة = {
   fetchPost: () => post.fetch({ المعرف: 'الأحدث' })،
  إعادة التعيين: 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, compose, CombineReducers } from 'redux'import PromiseMiddleware from 'redux-promise-middleware'import { المخفض كمورد } من 'redux-supermodel'const rootReducer = CombineReducers({ Resources })export الإنشاء الافتراضي (applyMiddleware (promiseMiddleware ())) (createStore) (rootReducer)