redux supermodel

supermodelo redux

Simplifique o esforço necessário para a comunicação entre seu Redux Store e uma API semelhante a REST. Este é um pacote de funções de criação de ação e redutores construídos com axios e redux-promise-middleware que cuidam do gerenciamento do estado dos recursos para você... tudo que você precisa é de uma URL!

Confira a demonstração

Referência de API

Criando o Cliente

Os clientes encapsulam a API que você está consumindo. Você pode criar um novo cliente fornecendo o URL base da API.

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

Criando Recursos

Dentro do seu cliente, você pode começar a definir recursos. Cada recurso representa um endpoint com o qual você pode interagir.

 // O URL completo será https://example.com/api/v1/blogsconst blogs = client('blogs')// https://example.com/api/v1/commentsconst comments = client('comments' )

Anexando os adereços do seu recurso ao seu componente

Comece com sua definição de recurso, vamos fingir que http://example.com/api/posts/latest retornará um objeto JSON com propriedades title e body .

 // resources.jsimport { createClient } de 'redux-supermodel'const client = createClient('http://example.com/api')// GET http://example.com/api/posts/latest/// / { title: 'Minha última postagem no blog', body: 'Olá, mundo!' }export const post = client('post', { url: 'posts/latest' }) post.fetch()

Você pode usar o componente de ordem superior de connect para anexar o estado do recurso ao seu componente e vincular quaisquer criadores de ação que você deseja usar. Na maioria das vezes, você estará buscando algo quando o componente for montado. Se este for o único componente que utilizará o recurso, você poderá redefini-lo quando o componente for desmontado. Normalmente, os criadores de ações create e update estarão vinculados ao botão ou aos manipuladores de envio em seu formulário.

 // MyComponent.jsimport React, { Component } de 'react'import { connect } de 'react-redux'import { post } de './resources'export class MyComponent estende Component {
  componente assíncronoDidMount() { tente { const res = aguarde this.props.fetchPost()
        // Os criadores de ações AJAX são promessas, então você pode esperar que eles // resolvam os erros ou façam algo depois que eles terminarem.  console.log(res)} catch (error) { // redux-supermodel rastreará o estado de erro para você, mas // você também pode fazer o que quiser.  alert('Algo ruim aconteceu!')}
  }

    // Se você acessar um recurso apenas dentro do contexto de um único componente e
  // seus filhos, você pode redefinir o recurso ao desmontar para limpar seu estado redux.
  componenteWillUnmount = () => this.props.resetPost()

  render() {const { inicializado, erro, título, corpo, fetchPost } = this.propsif (!initialized) { if (erro) {return <div className="error">{error.message}</div> } else {return <div className="loading">Carregando...</div>
       }}return ( <div><h1>{title}</h1><div className="body"> {body}</div><div className="error"> {error.message}</div>< button type="button" onClick={fetchPost}>Atualizar</button> </div>)
  }}função de exportação mapProps (estado) {
  const {pronto, erro, carga útil} = post(estado)
  const {dados: {título, corpo} = {}} = carga útil
  return { pronto, erro, título, corpo }} ações const = {
   fetchPost: () => post.fetch({ id: 'mais recente' }),
  resetPost: post.reset,} exportar conexão padrão (mapProps, ações) (MyComponent)

A carga útil pode ser um objeto enorme contendo muitas informações sobre a solicitação e resposta HTTP, a maioria das quais você não precisará ao renderizar seu componente, então sugiro usar a chamada mapProps para simplificar a carga apenas para o coisas que você vai precisar. Tente evitar usar a carga diretamente. Confira esta postagem do blog para leitura adicional.

Para obter detalhes sobre mapProps, leia a documentação do react-redux connect().

Instalação

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

Você precisará adicionar o middleware redux-promise-middleware e o redutor redux-supermodel à sua Redux Store.

 // store.jsimport { createStore, applyMiddleware, compose, combineReducers } de 'redux'import promessaMiddleware de 'redux-promise-middleware'import { redutor como recurso } de 'redux-supermodel'const rootReducer = combineReducers({recurso })exportar composição padrão(applyMiddleware(promiseMiddleware()))(createStore)(rootReducer)