redux supermodel

redux-超級模型

簡化您在 Redux Store 和類似 REST 的 API 之間進行通訊所需的工作。這是一個使用 axios 和 redux-promise-middleware 建立的動作建立器函數和減速器的包，可以為您處理資源狀態管理...您所需要的只是一個 URL！

查看示範

API參考

創建客戶端

客戶端封裝了您正在使用的 API。您可以透過提供 API 的基本 URL 來建立新客戶端。

從 'redux-supermodel' 導入 { createClient } 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將傳回一個具有title和body屬性的 JSON 物件。

 // resources.jsimport { createClient } from 'redux-supermodel' const client = createClient('http://example.com/api')// GET http://example.com/api/posts/latest/// / { title: '我最新的博文', body: '你好，世界！ ' }export 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 componentDidMount() { try { const res = wait this.props.fetchPost()
        // AJAX 操作建立者是承諾，因此您可以等待它們 // 處理錯誤或在錯誤完成後執行某些操作。  console.log(res)} catch (error) { // redux-supermodel 將為你追蹤錯誤狀態，但是 // 你也可以做你自己的事情。  警報（'發生了不好的事情！'）}
  }

    // 如果您只存取單一元件上下文中的資源並且
  // 它的子級，您可以在卸載時重置資源以清理您的 redux 狀態。
  componentWillUnmount = () => this.props.resetPost()

  render() {const { 初始化，錯誤，標題，正文，fetchPost } = this.propsif (!initialized) { if (error) {return <div className="error">{error.message}</div> } else {return <div className="loading">正在載入...</div>
       }}回傳 ( <div><h1>{title}</h1><div className="body"> {body}</div><div className="error"> {error.message}</div><按鈕類型=“按鈕”onClick={fetchPost}>刷新</按鈕> </div>）
  }}導出函數mapProps（狀態）{
  const { 就緒、錯誤、負載 } = post(狀態)
  const { 資料: { 標題, 內文 } = {} } = 負載
  回傳 { 就緒、錯誤、標題、正文 }}const actions = {
   fetchPost: () => post.fetch({ id: '最新' }),
  resetPost: post.reset,}匯出預設連線(mapProps, actions)(MyComponent)

有效負載可以是一個巨大的對象，其中包含有關 HTTP 請求和響應的大量信息，其中大部分在渲染組件時都不需要，因此我建議使用mapProps調用將有效負載簡化為您需要的東西。盡量避免直接使用payload。查看這篇文章以進一步閱讀。

有關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 { reducer 作為資源 } from 'redux-supermodel'const rootReducer'import { reducer 作為資源 } from 'redux-supermodel'const rootReducer =combines(預設compose(applyMiddleware(promiseMiddleware()))(createStore)(rootReducer)