Redux: Exemplos do mundo real (incluindo CRUD, padrões avançados, etc)

Adoraria ter um exemplo CRUD oficial que lida com:

• Autenticação
• Normalização
• Atualizações otimistas
• Edição local
• Relacionamentos de entidade
• Paginação

Se você gostaria de construir um curso em torno disso, é incrível. No entanto, acho que é importante que o próprio exemplo seja contribuído para este repo para que possamos mantê-lo e mantê-lo atualizado com as últimas alterações. Portanto, deve ser consistente com o sistema de construção e as convenções que usamos nos exemplos existentes.

Isso faz sentido?

Eu também adoraria ver onde as pessoas estão obtendo dados de APIs.

@gaearon o conteúdo / código será open source, então não há problema. Gostaríamos apenas de pedir um link para nós em algum lugar da página :) (editar - usar o sistema de compilação / convenções existentes é preferível para nós também)

@sebastiandeutsch você pode elaborar um pouco sobre isso?

Um tempo atrás, comecei a escrever um gerenciador de senhas usando react + redux, monogram e eccrypto . Armazene as senhas e compartilhe-as sem nunca enviá-las pela rede de forma não criptografada usando ECIES. Nunca chegou a realmente terminar, mas poderia muito bem satisfazer todos os itens em https://github.com/rackt/redux/issues/1353#issuecomment -178760036. Isso parece interessante?

@ vkarpov15

Isso parece muito interessante, mas temo que seja um pouco específico do domínio. A maioria das pessoas desejará ver um exemplo geral de CRUD (listas de itens editáveis ​​que podem ser vinculados a qualquer um dos itens, etc), e temo que um foco criptográfico possa tornar o exemplo menos acessível.

Estou muito interessado em edição local / offline com atualizações otimistas, tenho algum tempo, mas não tenho tanta experiência com app redux, só tenho um aplicativo nativo complexo, mas quase totalmente local / offline.
Talvez pudéssemos escrever um repo e trabalhar nele e discutir incrementalmente?
E também os aplicativos "modulares"?
Apenas para compartilhar algumas ideias, eu anotei algumas ideias sobre Como eu acho que o primeiro aplicativo off-line deve ser, experimente se você tiver tempo para gastar nele! :)

https://github.com/jsforum/jsforum/issues/7

Não tenho certeza de quão difundido é o problema e qual é o nível-alvo dos desenvolvedores para este curso, mas eu gostaria de ver em algum lugar da rede como arquitetar componentes de aplicativos complexos implementados em react + redux (como um formulário de várias etapas ou assistente com estado controlado por vários redutores) para que sejam reutilizáveis ​​como um todo em outro aplicativo.

@sompylasar Sinta-se à vontade para criar um problema sobre isso no repositório React Redux. Estou feliz em discutir abordagens para reutilizar ou isolar componentes compatíveis com Redux lá.

Se você está procurando um exemplo crud de nível iniciante, sempre há todo-mvc e o exército de tutoriais "começando com babel + redux + react + webpack" por aí. Não tenho certeza se há muito valor em outro, acabo lendo alguns novos posts sobre o assunto toda semana (mas talvez você pudesse construir um aplicativo que gere automaticamente esses tutoriais?: P). Eu diria que um tutorial de nível mais intermediário valeria mais a pena, e o aprendizado da IMO sobre criptografia poderia ser um benefício colateral atraente.

Não estou procurando um exemplo de nível iniciante, mas as partes complexas do CRUD (paginação, normalização, atualizações otimistas, relacionamentos) devem ser o foco do exemplo.

Isso consumiria uma API personalizada ou existente? Ou combinação?

Esta é a pergunta difícil. Eu não sei. A API do Github pode ser uma boa ideia, pois é gravável e os conceitos são familiares a todos. Eu sei que @ryanflorence trabalhou em algo semelhante.

Definitivamente visando desenvolvedores intermediários avançados com isso; as tuts do iniciante estão saturadas e raramente cobrem os tópicos mais difíceis (do mundo real) que Dan listou acima.

Estou aberto a APIs customizadas e / ou existentes - ficaríamos felizes em hospedar qualquer APIs customizadas em nossa conta aws. Também temos uma API completa para um clone do Medium.com que estamos desenvolvendo para alguns outros cursos que poderíamos usar. O código-fonte do back-end também estaria disponível para ele, caso as pessoas ficassem curiosas. Fico feliz em compartilhar detalhes, se isso parecer interessante.

@EricSimons Adoraria saber mais sobre o clone do Medium.

@cshenoy Com certeza. Estamos construindo um curso JS fullstack que terá React / Redux como front-end e Node como back-end. Teremos a API de back-end hospedada de forma independente para quem não deseja executá-la localmente, portanto, pode ser uma boa opção para ensinar alguns dos tópicos mais complexos acima. O conjunto de recursos para o clone Médio inclui o seguinte:

• Autenticação (e-mail / senha e oAuth, JWT)
• CRUD para postagens de blog e comentários em postagens de blog
• Seguindo usuários
• Feed global de todos os blogs e um feed dos blogs dos usuários que você segue
• Sistema de etiquetagem
• Perfis de usuário / edição de informações de perfil

O ETA na base de código final é no final desta semana, então terei mais informações por aí. Projetamos tudo para ser super modular, portanto, adicionar recursos adicionais seria trivial.

Os quadros de horários (rastreadores de tempo) realmente exercitam muitos aspectos complexos de fluxo / redux e crud. A paginação e o cache são necessidades óbvias à medida que você rola os dias e semanas para frente e para trás. Também existem várias APIs graváveis. Há muito mais do que apenas rastreamento de tempo envolvido também. Gerenciamento de usuários, entidades de projeto, etc.

Eu acho que isso seria ótimo. Lutei um pouco com isso, especialmente a parte de criação. Por exemplo, suponha que você tenha um componente ArticlePage que cria novos artigos como este:

// shortened version

import { addArticle } from '../actions'

function doAddArticle(props, handleAdded, values, dispatch) {
  props.addArticle(values)
  .then(handleAdded)
}

class AddArticlePage extends Component {
  handleAdded = () => {
    this.props.pushState(null, '/articles/')
  };

  render() {
    return (
      <div>
        <ArticleForm submit={(values, dispatch) => doAddArticle(this.props, this.handleAdded, values, dispatch)} />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {}
}

export default connect(mapStateToProps, {
  pushState,
  addArticle
})(AddArticlePage)

1. Eu nem tenho certeza se é a coisa "certa" a fazer interromper a promessa resolvida de fazer o redirecionamento.
2. E se eu quiser obter a ID do artigo recém-criado e, em vez de redirecionar para a página de índice, quiser redirecionar para a página /articles/{id}/ ?
3. E se meu componente quiser o resultado da ação assíncrona? Para mim, isso surgiu dentro do meu componente ArticleForm com um campo de formulário de upload de imagem: Eu envio uma ação "addImage" e quando a imagem é carregada eu quero 1) mostrar uma visualização da imagem enviada com base no URL e 2) quero atribua o URL ao formulário. Mas, achei difícil descobrir qual era a melhor maneira de fazer isso no Redux. O problema que encontrei foi que você precisa ser capaz de mapear o estado / imagem recém-adicionado para um suporte no componente de formulário, mas 1) como você obtém a imagem recém-adicionada e 2) e se houver 2 imagens sendo enviadas simultaneamente, como você obtém o URL da imagem certo para o componente certo?

Admito, estou reduxando há apenas alguns meses, então podem ser questões bobas, mas como um iniciante, eles definitivamente me fizeram tropeçar e ainda não sinto que minhas soluções sejam o "caminho certo".

@jonathaningram você já olhou para redux-thunk? Como uma alternativa ao que você está fazendo acima, permitiria que você despachasse de dentro de sua ação

@babsonmatt sim, já estou usando. Eu baseei o aplicativo no exemplo do mundo real que o usa. Talvez eu não esteja usando em todos os seus recursos.

@jonathaningram Obrigado pelo seu exemplo. Como foi apontado, você deve mover a lógica de redirecionamento para a conversão do criador da ação e despachar a atualização da rota a partir daí. Existem mais maneiras de gerenciar os efeitos colaterais (o redirecionamento é um efeito colateral da transição de estado causada por essa ação), como redux-saga ou redux-side-effects. Mas acho que a discussão profunda está fora do escopo desta questão.

@sompylasar obrigado. Sim, não quero desviar o assunto, mas apenas compartilhar minhas experiências do "mundo real" como um redux iniciante, o que espero que ajude os novos exemplos que surgem a partir desse problema.

@EricSimons , estou interessado em ajudar. No momento, estou mantendo um aplicativo CRUD usando nuclear-js e acho que muitas de suas ideias se traduziriam bem em redux. Deixe-me saber se você deseja fazer um brainstorm.

Recentemente, iniciei um projeto para gerenciamento de estado CRUD (sobre REST). Vindo de Marionette/Backbone Eu realmente perdi as convenções REST quando comecei a pesquisar sobre React / Redux.

https://github.com/masylum/resting-ducks

Não tenho certeza se as soluções são exemplos. Acho que as bibliotecas funcionam melhor para isso. O gerenciamento de estado é quase sempre o mesmo, em 2016 não deveríamos estar escrevendo código CRUD, mas nos concentrando em nossa lógica de negócios.

@EricSimons No momento, estou avaliando diferentes opções para especificar as necessidades de dados e quando buscá-

let routes = <Route path='/' component={Layout}>
  <IndexRoute component={BooksIndex} />
  <Route path='/book/new' component={BooksNew} />
  <Route path='/book/:id' component={BooksShow} loader={BooksLoader} />
  <Route path='/book/:id/edit' component={BooksEdit} loader={BooksLoader} />
</Route>;

O BooksLoader é uma classe que implementa duas funções:

• needsToSyncStore (params, store) retorna true se a loja precisa ser sincronizada, caso contrário, false
• syncStore (params, store) irá sincronizar a loja e retornar uma promessa

Aqui está um exemplo de implementação muito básico que pode ser definitivamente substituído por algo mais inteligente (por exemplo, ImmutableJS / Map):

import _ from 'lodash';
import * as Actions from 'actions';
import API from 'api';

export default class BooksLoader {
  needsToSyncStore(params, store) {
    let books = store.getState().books;

    if(books) {
      const book = _.findWhere(books.collection, { isbn: params.id });
      if(book) {
        return false;
      }
    }

    return true;
  }

  syncStore(params, store) {
    let { dispatch } = store;
    let api = new API();

    let loadBooks = Actions.loadBooks();
    return loadBooks(dispatch, store.getState);
  };
}

A ideia é que um loader se preocupe apenas com o estado que é fornecido por uma rota e com a árvore de estado redux que torna mais fácil o teste.

A próxima peça é um carregador de loja que é um componente de reação fortemente inspirado em @ryanflorence AsyncProps (https://github.com/rackt/async-props) que pode ser usado como RenderContext de ReactRouter: https: //gist.github. com / sebastiandeutsch / e6148ca0741cc355248c

É verificar as rotas do ReactRouter para os carregadores e executá-los. Ele também expõe o estado de carregamento por meio de contextos. Em ação, seria assim:

<Provider store={store}>
  <Router
    history={browserHistory}
    render={(props) => (
      <StoreLoader {...props} store={store} />
    )}>
      {routes}
    </Router>
</Provider>

Em um componente de rota (esses são componentes especiais que são filhos diretos do roteador), posso usar o contexto como este:

export class BooksShow extends React.Component {
  static contextTypes = {
    storeIsSynchronized: React.PropTypes.bool
  };
  ...
  render() {
    const { book } = this.props;

    if(this.context.storeIsSynchronized) {
      /* display components */
    } else {
      /* display loading spinner */
    }
}

export default connect(
  (state, props) => {
    return {
      book: _.findWhere(state.books.collection, { isbn: props.params.id } )
    }
  },
  (dispatch) => ({
    actions: bindActionCreators(Actions, dispatch)
  })
)(BooksEdit);

@gaearon O que você acha dessas ideias?

@sebastiandeutsch Gosto dessa abordagem. Eu também estou experimentando com Async-Props, suas idéias aqui parecem muito legais.

Imaginei que o exemplo deveria ser mais geral, em vez de ser adaptado em torno de uma abstração para obtenção de dados. Eu realmente gosto de https://github.com/optimizely/nuclear-js/tree/master/examples/rest-api como um exemplo básico de uma maneira fácil de configurar lojas e ações para APIs Rest.

Eu o estendi para suportar cache e até mesmo armazenar solicitações em andamento em uma loja (de modo que, se a solicitação for feita novamente, o chamador simplesmente receba um adiado em vez de reiniciar o xhr. Um exemplo mais robusto do que estou falando está aqui : https://github.com/jordangarcia/nuclear-api-module-example/tree/master/rest_api. E copiei alguns dos conceitos de

@EricSimons é o problema mais relacionado ao assunto e encontrar boas APIs graváveis ​​ou você está procurando abordagens específicas?

Estou mais interessado no assunto (desde o pior caso, podemos hospedar nossas próprias APIs graváveis ​​para o pessoal usar). Muito obrigado a todos os comentadores acima, a propósito, esta discussão tem sido fantástica até agora. Adoraria ouvir mais pensamentos / ideias sobre o que devemos cobrir nesses exemplos.

Para sua informação, @dan-weaver e outros interessados ​​em trabalhar nisso - sinta-se à vontade para enviar uma mensagem para mim

No mundo do Meteor, há um grande projeto de exemplo de código aberto que se originou de um livro sobre o Meteor. Este projeto é o Telescope , que é um aplicativo da web semelhante ao Reddit ou Hacker News. Se Redux tivesse um exemplo semelhante, isso seria ótimo. Muitos desenvolvedores aprenderam o Meteor seguindo o livro e construindo uma versão menor do Telescope junto com ele. Um aplicativo como o Telescope cobriria todos os tópicos levantados por Dan em um aplicativo com o qual a maioria dos desenvolvedores já está familiarizada (por causa do Hacker News, Reddit, ..).

Comecei a criar a base para um aplicativo semelhante alguns meses atrás no webapp *. Este projeto tem o processo de construção, módulos css, autenticação, um servidor separado para a API, MongoDB, renderização do lado do servidor, GraphQL e mais já configurados (embora algumas coisas possam estar um pouco desatualizadas, precisam de mais algum trabalho ou podem ser feitas Melhor). Além disso, tem divisão de redutor, algo que acredito que nenhum outro exemplo tenha. O que falta são boas soluções para busca de dados, atualizações otimistas e dados em tempo real. Além disso, está um pouco desatualizado, pois 2 meses parecem uma eternidade em quão rápido tudo está progredindo agora :)

Se você deseja um ponto de partida para a criação de um exemplo para o curso, talvez o _webapp_ possa ser uma inspiração. E adoraria ver algo semelhante ao Telescope feito no Redux.

* _A pasta de conhecimento contém algumas informações sobre a arquitetura / decisões tomadas._

_Sidenota: _ Como percebi que o Redux não tem uma história para busca de dados, estou criando um sistema semelhante ao Relay que se integra ao Redux. Esse é o motivo pelo qual não atualizo o _webapp_ há 2 meses. Caso eu consiga criar esse sistema, continuarei com o _webapp_.

Um problema enfrentado é que o Redux é de nível muito baixo e, portanto, muito sem opinião sobre como você _realmente_ constrói um aplicativo em torno dele. Portanto, não tenho certeza se podemos simplesmente manter _uma_ base de código de exemplo para aprender, uma vez que existem tantas abstrações válidas possíveis _entre_ redux e a interface de usuário final. Isso é exemplificado por algumas das discussões neste tópico, onde muitas possibilidades diferentes para o carregamento de dados são apresentadas sem um vencedor claro - não há uma maneira certa, pois as escalas de aplicativos diferem enormemente.

Por esta razão, é desejável criar "_The_ Advanced TODOMVC of Redux" para uma especificação que requer todos os recursos avançados que Dan mencionou anteriormente.

Conforme avançamos, acredito que começaremos a ver mais abstrações / bibliotecas / frameworks _around_ Redux que poderiam usar este aplicativo avançado como prova de conceito. Na verdade, com o tempo, isso pode ser renomeado para não ser específico para Redux.

No front da API, eu adoraria vê-lo seguir algum tipo de padrão ( JSON-API fornece uma base excelente para desnormalização e descrever relacionamentos) e, eventualmente, ter um servidor GraphQL na frente disso.

Quanto a como isso é estruturado como uma comunidade, suspeito que poderíamos ter um repositório central contendo as especificações do aplicativo, implementação / s do servidor, bem como uma lista / gráfico de comparação de todas as implementações atuais.

Por outro lado, mas parcialmente relacionado, nota do tópico específico aqui, acho que faríamos bem em priorizar esta questão no esclarecimento do escopo do Redux - enfatizando a natureza de baixo nível.

Ps. Tenho uma palestra sobre "Real World Redux" chegando no React London em breve (onde espero ter tempo para explorar as questões mais avançadas disponíveis), então fique atento a isso: D

Eu estaria pronto para trabalhar nisso, acho que fornecer aos novatos um aplicativo Redux utilizável, comentado e explicado que não é uma lista de tarefas é uma ótima ideia. Algum trabalho sobre isso já começou @EricSimons?

Parece haver muitas perguntas semelhantes sobre como reduzir o clichê de redux e construir algo do mundo real com ele. Acho que encontrei uma solução muito boa (entre outras coisas) sobre a qual escrevi aqui:

https://medium.com/@timbur/react -automatic-redux-supplies-and-replicators-c4e35a39f1

TL; DR: você pode criar redux provedores que se combinam automaticamente aos seus componentes com base em seus propTypes . Tudo que você realmente precisa é de um diretório components , um diretório providers e um diretório themes opcional, mas recomendado. Tudo é facilmente intercambiável, compreensível, sustentável, extensível e reutilizável. Há muito mais incluído com tudo isso, como recarregamento a quente tanto do cliente quanto do servidor, renderização do servidor, etc., etc., etc. Eu construí um aplicativo do zero com base no boilerplate incluído hoje e demorou cerca de 10 minutos, ao contrário do Normalmente, demoraria 1 hora. :)

Falando por experiência própria, como um adotante de reação precoce, prefiro não usar a API do Github em um exemplo.

• Sua autenticação é complicada demais para quem procura algo que "simplesmente funcione".
• Não é adequado para experimentos. Para evitar ser destrutivo ao fazer mutações de API, eu teria que fazer uma conta Github separada / descartável.

Em vez disso, use uma API personalizada simples. Não queremos ser dependentes de terceiros e permitir que qualquer pessoa execute sua própria instância, como meu exemplo BottledAPI (limpar) em json-server .

Isso também permitiria outras implementações de back-end em Javascript, Java, C #, PHP, etc. Isso ajudaria a iniciar o desenvolvimento, já que é muito útil.

Aliás, no link em meu comentário acima, há detalhes sobre como construir um aplicativo de blog. Estou planejando adicionar a autenticação do usuário e tudo isso na próxima semana.

Oi pessoal! Estou estudando ReactJS e desenvolvi uma versão do meu encurtador de URL pessoal usando React + Redux. Meu exemplo usa Gulp + Browserify + Babelify para o desenvolvimento de front-end. Eu escrevi testes de unidade usando Mocha e Enzyme para componentes e ações. Este exemplo também tem:

• Operações de criação, leitura e atualização
• Autenticação com Json Web Token
• Paginação
• Tag
• CORS

Existem alguns bugs na interface e usabilidade. Mas está funcionando =)
Talvez alguém possa usá-lo como base para um exemplo do mundo real.

Demo: https://gustavohenrique.github.io/gh1
Fonte: https://github.com/gustavohenrique/gh1

Aceito sugestões sobre como melhorar este exemplo. Obrigado!

Um pouco tarde para a festa, mas acabei de lançar um aplicativo da web de gerenciamento completo que é construído no Redux.

Usamos redux-thunk para trabalhos assíncronos e redux-ignore que forneceu uma melhoria surpreendente (_on mobile_), apenas filtrando nossos redutores de nível superior.
O aplicativo da web é 100% responsivo, por isso é fácil de usar / testar no celular.

Gerenciamos atualizações otimistas "revertendo" a ação anterior. Os redutores afetados sabem como rastrear o caminho de volta ao estado anterior, por isso é bastante isolado e eficiente.

De qualquer forma, aqui estão os links http://www.handy-erp.com/en/
Basta criar uma conta e se apaixonar.

@SebastienDaniel Congrats! é um lindo site. Você colocou a parte redux em algum repositório público?

Obrigado @gustavohenrique
Infelizmente não, a fonte não está em um repositório público. No entanto, estou bastante aberto para usar o código-fonte para ajudar a cobrir quaisquer dúvidas ou talvez construir demos para ajudar a comunidade.

Eu realmente gostaria de ver exemplos de modularidade. Se você está construindo um aplicativo com uma grande quantidade de funcionalidades, você realmente vai procurar uma maneira de construir módulos de responsabilidade única. Melhor para as equipes, melhor para a manutenção.

Primeiramente, obrigado por compartilhar o código! @Gustavohenrique
Outras coisas:
Eu acho que pode ser uma lista de usuários? Conecte-se? registro...
redux precisa desses exemplos!

Eu concordo com @gggin e @EricSimons, uma versão completa e pronta para produção desses recursos seria incrível:

Autenticação (e-mail / senha e oAuth, JWT)
CRUD para postagens de blog e comentários em postagens de blog
Seguindo usuários
Feed global de todos os blogs e um feed dos blogs dos usuários que você segue
Sistema de etiquetagem
Perfis de usuário / edição de informações de perfil

Além disso, um sistema básico de funções ou permissões seria ótimo. Algo equivalente às equipes do GitHub ou membros do Trello

Ei todo mundo,

Tenho trabalhado em uma proposta vaga para um robusto redux crud api apenas com base em minha experiência nas últimas semanas:

https://github.com/ppiekarczyk/redux-crud-api-middleware/blob/master/README.md

Qualquer feedback seria grato. Obrigado!

Eu estaria disposto a pegar o aplicativo que estou construindo agora e convertê-lo em um projeto de exemplo de software livre também.

Olá a todos - temos o prazer de anunciar que a base de código de exemplo está quase pronta para revisão. É muito completo e cobre a maioria dos casos de uso do mundo real sobre os quais falamos neste tópico (auth, CRUD, paginação, etc). @ vkarpov15 tem algumas coisas para terminar, mas deve estar pronto no início da próxima semana.

Adoraríamos sua ajuda para revisar a base de código. Eu sei que @gaearon mencionou que gostaria de dar uma olhada alguns meses atrás, e todo e qualquer feedback da comunidade aqui seria excelente. Estaremos usando este repositório para a base de código inicial enquanto revisamos e iteramos e, em seguida, distribuímos o repositório final para o repositório redux oficial quando estiver pronto. Sinta-se à vontade para estrelar / assistir, e eu também postarei uma atualização neste tópico assim que a base de código estiver online e pronta para revisão.

Fico feliz em responder a quaisquer perguntas e obrigado a todos aqui pela excelente discussão!

Parece bom. Certifique-se de adicionar uma menção e um link na pergunta relacionada ao FAQ do Redux quando estiver pronto.

Como prometido, a base de código está pronta para revisão em https://github.com/GoThinkster/redux-review , adoraríamos ouvir o feedback de todos. Questões e RP são bem-vindos!

Ei pessoal, muito obrigado pela discussão incrível e por colocar um ótimo exemplo do mundo real ..

Apenas para adicionar à lista de tais exemplos, encontrei este exemplo https://github.com/andrewngu/sound-redux , demonstração de trabalho implantada em https://soundredux.io/. Parece que também se qualifica para os critérios dos quais @gaearon estava falando. Mas não tenho certeza, então seria útil se alguém pudesse dar feedback. Se se qualificar, será um bom acréscimo à lista. Além disso, é mantido ativamente no último ano e meio.

E, finalmente, um agradecimento especial a @EricSimons pelo incrível exemplo do mundo real.

Na verdade, adicionei uma entrada de FAQ que aponta para uma série de aplicativos React e Redux do mundo real, em http://redux.js.org/docs/faq/Misc Miscellaneous.html#misc Miscellaneous -real-projects. (Na verdade, eu sei que já vi esse aplicativo Sound-Redux antes, mas não acho que o adicionei à minha lista. Vou ter que fazer isso.)

Vou prosseguir e encerrar esse problema com o fundamento de que não parece mais haver uma necessidade imediata de adicionar um exemplo maior diretamente ao repositório Redux, dado o número de aplicativos "reais" que podemos aponta para. Se alguém quiser contribuir ativamente com um exemplo específico para o repo, diga algo e podemos reabrir isso.

E sim, obrigado a todos que contribuíram com discussões e exemplos!