Redux: 実際の例（CRUD、高度なパターンなどを含む）

以下を処理する公式のCRUDの例が欲しいです。

• 認証
• 正規化
• 楽観的な更新
• ローカル編集
• 実体関連
• ページ付け

これを中心にコースを作りたいのなら、それは素晴らしいことです。 ただし、サンプル自体がこのリポジトリに提供されていることが重要だと思います。そうすることで、サンプルを維持し、最新の変更を最新の状態に保つことができます。 したがって、既存の例で使用しているビルドシステムと規則と一致している必要があります。

これは意味がありますか？

また、人々がAPIからデータをフェッチしている場所も確認したいと思います。

@gaearonのコンテンツ/コードはオープンソースになるので、問題ありません。 ページのどこかに戻るリンクをお願いします：）（編集-既存のビルドシステム/コンベンションを使用することも私たちにとって望ましいです）

@sebastiandeutschこれについて少し詳しく

しばらく前に、react + redux、 monogram 、 eccryptoを使用してパスワードマネージャーを作成することから始めhttps： //github.com/rackt/redux/issues/1353#issuecomment-178760036のすべての項目を十分に満たすことができました。 面白そうですか？

@ vkarpov15

これは非常に興味深いように聞こえますが、ドメイン固有であるとは思えません。 ほとんどの人は一般的なCRUDの例（いずれかのアイテムにリンクできる編集可能なアイテムのリストなど）を見たいと思うでしょう、そして私は暗号の焦点が例をより親しみやすくするかもしれないのではないかと心配しています。

楽観的なアップデートを使用したローカル/オフライン編集に非常に興味があります。しばらくはありますが、reduxアプリの経験はあまりなく、複雑なネイティブアプリしか入手できませんでしたが、ほぼ完全にローカル/オフラインです。
たぶん、レポを書いてそれに取り組み、段階的に話し合うことができるでしょうか？
また、「モジュラー」アプリはどうですか？
いくつかのアイデアを共有するために、オフラインの最初のアプリがどうあるべきかについていくつかのアイデアを書き留めました。時間があれば試してみてください。 :)

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

問題がどれほど広まっているのか、このコースの開発者の目標レベルはわかりませんが、react + reduxで実装された複雑なアプリコンポーネント（マルチステップフォームやウィザードなど）を設計する方法をネット上のどこかで見たいと思います。状態は複数のレデューサーによって制御されているため、別のアプリで全体として再利用できます。

@sompylasar ReactReduxリポジトリでこれに関する問題を自由に作成してください。 そこで、Redux対応コンポーネントを再利用または分離するためのアプローチについて話し合うことができてうれしいです。

初心者レベルのクラッドの例を探している場合は、常にtodo-mvcと、「babel + redux + react + webpackを使い始める」チュートリアルの軍隊があります。 さらに別のものに多くの価値があるかどうかはわかりませんが、毎週このテーマに関するいくつかの新しいブログ投稿を読むことになります（ただし、これらのチュートリアルを自動的に生成するアプリを作成できますか？：p）。 私は、より中級レベルのチュートリアルの方が価値があり、暗号について学ぶIMOは魅力的な副次的な利点になる可能性があると主張します。

初心者レベルの例を探しているわけではありませんが、CRUDの複雑な部分（ページ付け、正規化、楽観的な更新、関係）を例の焦点にする必要があります。

これはカスタムまたは既存のAPIを消費しますか？ または組み合わせ？

これは難しい質問です。 わからない。 Github APIは記述可能であり、概念は誰にでもなじみがあるため、良いアイデアかもしれません。 @ryanflorenceが似たようなことに

これで中上級の開発者を確実にターゲットにします。 初心者のタットは飽和状態にあり、上記のダンが（現実の）難しいトピックをカバーすることはめったにありません。

私はカスタムAPIと既存のAPIの両方、あるいはその両方を受け入れています。awsアカウントでカスタムAPIをホストできれば幸いです。 また、Medium.comクローン用の本格的なAPIがあり、使用できる他のいくつかのコース用に構築しています。興味があれば、バックエンドのソースコードも利用できます。 面白そうな場合は、詳細を共有してください。

@EricSimonsMediumクローンについてもっと知りたいです。

@cshenoy確かに。 フロントエンドとしてReact / Reduxを、バックエンドとしてNodeを使用するフルスタックJSコースを構築しています。 バックエンドAPIは、ローカルで実行したくない人のために個別にホストされるため、上記のより複雑なトピックのいくつかを教えるのに適している可能性があります。 ミディアムクローンの機能セットには、次のものが含まれます。

• 認証（メール/パスとoAuth、JWT）
• ブログ投稿のCRUDとブログ投稿へのコメント
• フォローしているユーザー
• すべてのブログのグローバルフィードとフォローしているユーザーのブログのフィード
• タグ付けシステム
• ユーザープロファイル/プロファイル情報の編集

最終的なコードベースのETAは今週の終わりまでにあるので、その頃にもっと情報があります。 すべてがスーパーモジュラーになるように設計されているため、機能を追加するのは簡単です。

タイムシート（タイムトラッカー）は、フラックス/リダックスとクラッドの多くの複雑な側面を実際に実行します。 数日から数週間を前後にスクロールすると、ページ付けとキャッシュが明らかに必要になります。 書き込み可能なAPIもたくさんあります。 タイムトラッキングだけではありません。 ユーザー管理、プロジェクトエンティティなど。

これは素晴らしいことだと思います。 私はそれと少し苦労しました、特にそれの作成部分。 たとえば、次のような新しい記事を作成するArticlePageコンポーネントがあるとします。

// 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. リダイレクトを行うという解決された約束を連鎖させることが「正しい」ことであるかどうかさえわかりません。
2. 新しく作成された記事からIDを取得し、インデックスページにリダイレクトする代わりに、 /articles/{id}/ページにリダイレクトしたい場合はどうなりますか？
3. コンポーネントが非同期アクションの結果を必要としている場合はどうなりますか？ 私の場合、これは画像アップロードフォームフィールドを備えたArticleFormコンポーネント内で発生しました。アクション「addImage」をディスパッチし、画像がロードされたら、1）URLに基​​づいてアップロードされた画像のプレビューを表示します。2）フォームにURLを割り当てます。 しかし、Reduxでこれを行うための最良の方法を理解するのは難しいと思いました。 私が見つけた問題は、新しく追加された状態/画像をフォームコンポーネントの小道具にマッピングできる必要があるということでしたが、1）新しく追加された画像を取得するにはどうすればよいですか？2）2つの画像が同時にアップロードされている場合はどうなりますか？適切なコンポーネントの適切な画像URLを取得していますか？

確かに、私は数か月しかReduxを使用していないので、ばかげた問題かもしれませんが、初心者としては間違いなく私をつまずかせ、私の解決策が「正しい方法」であるとはまだ感じていません。

@jonathaningramあなたはredux-thunkを見たことがありますか？ 上記で行っていることの代わりに、アクション内からディスパッチできます

@babsonmattyep私はすでにそれを使用しています。 私はそれを使用する実際の例に基づいてアプリを作成しました。 たぶん私はそれを完全な機能に使用していません。

@jonathaningram例をありがとう。 指摘されたように、リダイレクトロジックをアクション作成者のサンクに移動し、そこからルート更新をディスパッチする必要があります。 redux-sagaやredux-side-effectsなど、副作用を管理する方法は他にもあります（リダイレクトは、そのアクションによって引き起こされる状態遷移の副作用です）。 しかし、深い議論はこの問題の範囲外だと思います。

@sompylasarありがとう。 はい、私はこの問題を回避したくはありませんが、この問題から生じる新しい例に役立つことを願って、reduxの初心者としての私の「現実世界」の経験を共有したいと思いました。

@EricSimons私は助けることに興味があります。 私は現在、nuclear-jsを使用してCRUDアプリを保守していますが、そのアイデアの多くはreduxにうまく変換されると思います。 ブレーンストーミングをしたい場合はお知らせください。

私は最近、CRUD（over REST）状態管理のプロジェクトを開始しました。 Marionette/Backboneから来たReact / Reduxを掘り下げ始めたとき、私は本当にRESTの慣習を逃しました。

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

解決策が例であるかどうかはわかりません。 そのためには図書館の方がうまくいくと思います。 状態管理はほとんどの場合同じです。2016年には、CRUDコードを作成するのではなく、ビジネスロジックに焦点を当てる必要があります。

@EricSimons現在、データのニーズを指定する場所とデータをフェッチするタイミングについて、さまざまなオプションを評価しています。 1つのオプションは、Relayishを実装することですが、少しやり過ぎだと感じています。 私がプロジェクトのために作ったものは、ローダー属性を使用してルートでの読み込みのニーズを指定することです。

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>;

BooksLoaderは、次の2つの関数を実装するクラスです。

• needToSyncStore（params、store）は、ストアを同期する必要がある場合はtrueを返し、そうでない場合はfalseを返します。
• syncStore（params、store）はストアを同期し、promiseを返します

これは非常に基本的な実装例であり、よりスマートなもの（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);
  };
}

ローダーは、ルートによって提供される状態と、テストを容易にするredux状態ツリーのみを考慮します。

次の部分は、ReactRouterのRenderContextとして使用できる@ryanflorence AsyncProps（https://github.com/rackt/async-props）に大きく影響を受けたreactコンポーネントであるストアローダーです： https：//gist.github。 com / sebastiandeutsch / e6148ca0741cc355248c

ローダーのReactRouterのルートをチェックして実行しています。 また、コンテキストを介してロード状態を公開します。 実際には、次のようになります。

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

ルートコンポーネント（これらはルーターから直接子である特別なコンポーネントです）では、次のようなコンテキストを使用できます。

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これらのアイデアについてどう思いますか？

@sebastiandeutsch私はそのアプローチが好きです。 私もAsync-Propsを試しています。ここでのアイデアは本当にクールに見えます。

この例は、データフェッチの抽象化に合わせて調整されるのではなく、より一般的なものであると想定されていたと思います。 Rest APIのストアとアクションを設定する簡単な方法の基本的な例として、 https：//github.com/optimizely/nuclear-js/tree/master/examples/rest-apiが本当に好きです。

キャッシュをサポートし、進行中のリクエストをストアに保存するように拡張しました（リクエストが再度行われた場合、呼び出し元はxhrを再開するのではなく、単に延期されます。私が話していることのより堅牢な例はここにあります： https ： @ jordangarciaの概念のいくつかをコピーして大成功を収めました。ここでのアプローチは、うまく機能すると思います。 reduxも同様です（normalizrなどを伴います）。

@EricSimonsは、主題と書き込み可能な優れたAPIの検索に関する問題ですか、それとも特定のアプローチを探していますか？

私は主に主題に興味があります（最悪の場合、人々が使用するための独自の書き込み可能なAPIをホストできるため）。 上記のコメント投稿者の皆さんに心から感謝します。これまでのところ、この議論は素晴らしかったです。 これらの例でカバーすべきことについて、より多くの考え/アイデアを聞きたいと思います。

参考までに@ dan-weaverとこれに取り組むことに興味のある他の人たち-遠慮なく私にメモを撮ってください

Meteorの世界には、Meteorに関する本から生まれた1つの大きなオープンソースのサンプルプロジェクトがあります。 このプロジェクトはTelescopeで、RedditやHackerNewsに似たWebアプリケーションです。 Reduxに同様の例があれば、それは素晴らしいことです。 多くの開発者は、この本を読み、それと一緒に望遠鏡のより小さなバージョンを構築することによってMeteorを学びました。 Telescopeのようなアプリケーションは、ほとんどの開発者がすでに精通しているアプリケーションでDanが提起したすべてのトピックをカバーします（Hacker News、Redditなどのため）。

私は数ヶ月前にwebapp *で同様のアプリケーションの基礎を作り始めました。 このプロジェクトには、ビルドプロセス、cssモジュール、認証、API用の個別のサーバー、MongoDB、サーバー側レンダリング、GraphQLなどがすでにセットアップされています（ただし、少し古くなっているか、さらに作業が必要であるか、実行できる可能性があります）より良い）。 さらに、レデューサーの分割があります。これは、他の例にはないと思います。 欠けている大きな点は、データフェッチ、楽観的な更新、リアルタイムデータに対する優れたソリューションです。 また、2か月はすべてが現在どれだけ速く進んでいるかという点で永遠のように見えるので、少し時代遅れです:)

コースの例を作成するための開始点が必要な場合は、おそらく_webapp_がインスピレーションになる可能性があります。 そして、Reduxで行われている望遠鏡に似たものを見たいです。

* _ノウハウフォルダには、行われたアーキテクチャ/決定に関する情報が含まれています。_

_補足：_ Reduxにはデータフェッチのストーリーがないことに気付いたので、現在、Reduxと統合するRelayに似たシステムを作成しています。 それが、私が2か月間_webapp_を更新していない理由です。 そのシステムの作成に成功した場合は、_webapp_を続行します。

直面している問題の1つは、Reduxのレベルが非常に低いため、その周りにアプリケーションを実際にどのように構築するかについてはまったく意見が分かれていないことです。 したがって、reduxと最終的なユーザーインターフェイスの間に有効な抽象化が非常に多くあるため、学習するコードベースの例を1つだけ維持できるかどうかはわかりません。 これは、このスレッドでの議論の一部によって例示されています。ここでは、データの読み込みに関するさまざまな可能性が明確な勝者なしで提示されています。アプリケーションの規模が大きく異なるため、正しい方法は

このため、Danが前述したすべての高度な機能を必要とする仕様に「_The_Advanced TODOMVCofRedux」を考案することが望ましい。

前進するにつれて、この高度なアプリケーションを概念実証として使用できる、より多くの抽象化/ライブラリ/フレームワーク_around_Reduxが見られるようになると思います。 実際、時間の経過とともに、これは非Redux固有になるようにブランド名が変更される可能性があります。

APIの面では、ある種の標準（ JSON-APIは非正規化と関係の記述に優れた基盤を提供します）に従い、最終的にはこの前にGraphQLサーバーを配置することを望んでいます。

これがコミュニティとしてどのように構成されているかについては、アプリケーション仕様、サーバー実装、および現在のすべての実装のリスト/比較チャートを含むコアリポジトリを作成できると思います。

一方で、部分的に関連していますが、ここでの特定のトピックから、Reduxの範囲を明確にすることでこの問題を優先するのがよいと思います-低レベルの性質を強調します。

追伸私は「現実の世界Reduxの」話がで来るているロンドンに反応D：すぐに（私はうまくいけば、手で、より高度な問題を探求する時間を取得します場合）ので、外を見ます

私はこれに取り組むつもりです。todoリストではない、使いやすく、コメントされ、説明されたReduxアプリケーションを新参者に提供することは素晴らしいアイデアだと思います。 これに関する作業はまだ@EricSimonsで開始されていますか？

reduxの定型文を減らし、それを使って現実世界を構築する方法については、同様の質問がたくさんあるようです。 私はここで書いた（とりわけ）かなり良い解決策を見つけたと思います：

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

TL; DR： propTypes基づいて、コンポーネントに自動的に一致するreduxプロバイダーを作成できます。 本当に必要なのは、 componentsディレクトリ、 providersディレクトリ、およびオプションですが推奨されるthemesディレクトリだけです。 すべてが簡単に交換可能で、理解しやすく、保守可能で、拡張可能で、再利用可能です。 クライアントとサーバーの両方のホットリロード、サーバーレンダリングなど、さらに多くの機能が含まれています。今日、付属のボイラープレートに基づいてアプリを最初から作成しましたが、通常は1時間かかります。 :)

早期対応の採用者としての経験から言えば、例ではGithubAPIを使用したくありません。

• その認証は、「正しく機能する」ものを探している人にとっては非常に複雑です。
• 実験には適していません。 APIミューテーションを実行しているときに破壊的になることを避けるために、別の/使い捨てのGithubアカウントを作成する必要があります。

代わりに、単純なカスタムAPIを使用してください。 サードパーティに依存したくないので、 json-server私のBottledAPIの例（wip）のように誰でも独自のインスタンスを実行できるよう

これにより、Javascript、Java、C＃、PHPなどの他のレストバックエンド実装も可能になります。これは、かなりのターンキーとして、開発のキックスタートに役立ちます。

ところで、上記の私のコメントのリンク内に、ブログアプリを構築する方法の詳細があります。 来週中にユーザー認証などを追加する予定です。

こんにちは、みんな！ 私はReactJSを研究していて、React + Reduxを使用して個人用URL短縮サービスのバージョンを開発しました。 私の例では、フロントエンド開発にGulp + Browserify + Babelifyを使用しています。 コンポーネントとアクションについて、MochaとEnzymeを使用して単体テストを作成しました。 この例には次のものもあります。

• 作成、読み取り、更新操作
• JsonWebトークンによる認証
• ページ付け
• タグ
• CORS

インターフェイスと使いやすさにいくつかのバグがあります。 しかし、それは機能しています=）
たぶん誰かがそれを実際の例のベースとして使うことができます。

デモ： https ：
ソース： https ：

この例を改善する方法についての提案を受け入れます。 ありがとう！

パーティーには少し遅れましたが、Redux上に構築された本格的な管理Webアプリケーションを立ち上げました。

非同期ジョブにはredux-thunkを使用し、トップレベルのレデューサーをフィルタリングするだけで驚くべき改善（_モバイル上_）を提供するredux-ignoreを使用します。
Webアプリは100％応答性があるため、モバイルで簡単に使用/テストできます。

前のアクションを「ロールバック」することにより、楽観的な更新を管理します。 影響を受けるレデューサーは、以前の状態に戻る方法を知っているため、非常に分離されて効率的です。

とにかく、ここにリンクがありますhttp://www.handy-erp.com/en/
アカウントを作成して、自分をノックアウトするだけです。

@SebastienDanielおめでとうございます！ それは美しいウェブサイトです。 reduxの部分をパブリックリポジトリに配置しましたか？

ありがとう@gustavohenrique
残念ながら、いいえ、ソースは公開リポジトリにありません。 ただし、質問をカバーしたり、コミュニティを支援するためのデモを作成したりするために、ソースを使用することは非常にオープンです。

モジュール性の例を本当に見たいです。 膨大な量の機能を備えたアプリを構築している場合は、単一責任モジュールを構築する方法を本当に探しています。 チームにとってより良い、保守性にとってより良い。

まず、共有コードありがとうございます！@gustavohenrique
他のもの：
ユーザーリストかもしれないと思いますか？ ログインする？ 登録...
reduxにはこれらの例が必要です！

@ggginと@EricSimonsに同意します。これらの機能の本格的な本番

認証（メール/パスとoAuth、JWT）
ブログ投稿のCRUDとブログ投稿へのコメント
フォローしているユーザー
すべてのブログのグローバルフィードとフォローしているユーザーのブログのフィード
タグ付けシステム
ユーザープロファイル/プロファイル情報の編集

これに加えて、基本的な役割または権限システムが素晴らしいでしょう。 GitHubのチームまたはTrelloのメンバーに相当するもの

みなさん、こんにちは

私は過去数週間の経験に基づいて、堅牢なredux crud api緩い提案に取り組んできました。

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

どんなフィードバックもありがたいです。 ありがとう！

私が今構築しているアプリケーションを、オープンソースのサンプルプロジェクトに変換することもできます。

みなさん、こんにちは。サンプルコードベースのレビューの準備がほぼ整ったことをお知らせします。 これは非常に徹底的で、このスレッドで説明した実際のユースケースのほとんど（認証、CRUD、ページ付けなど）をカバーしています。 @ vkarpov15にはいくつかの仕上げが必要ですが、来週の早い時期に準備が整うはずです。

コードベースのレビューにご協力いただければ幸いです。 @gaearonが、数か月前に見ても構わないと言っていたことを知っています。ここのコミュニティからのフィードバックはどれも素晴らしいものになるでしょう。 このリポジトリを最初のコードベースに使用し、レビューと反復を行い、準備ができたら最終的なリポジトリを公式のreduxリポジトリにシンジケートします。 スター/ウォッチをお気軽にどうぞ。コードベースがオンラインになり、レビューの準備ができたら、このスレッドに更新を投稿します。

どんな質問にも喜んでお答えします。素晴らしい議論をしてくれたここのみんなに感謝します！

いいですね。 準備ができたら、関連するReduxFAQの質問に言及とリンクを追加してください。

約束どおり、コードベースはhttps://github.com/GoThinkster/redux-reviewでレビューする準備ができており、皆さんのフィードバックをお待ちしています。 問題とPRは大歓迎です！

やあみんな、素晴らしい議論と素晴らしい実世界の例を置いてくれてありがとう。

そのような例のリストに追加するために、私はこの例https://github.com/andrewngu/sound-reduxに出くわしました。これは、 です。 @gaearonが話していた基準にも

そして最後に、素晴らしい実例を@EricSimonsに特に感謝します。

私は実際に、 http： //redux.js.org/docs/faq/Miscellaneous.html#miscellaneous -real-projectsで、実際のReactおよびReduxアプリの数を指すFAQエントリを追加しました。 （実際、そのSound-Reduxアプリは以前に見たことがありますが、リストに追加したとは思いません。追加する必要があります。）

「実際の」アプリの数を考えると、Reduxリポジトリに直接大きな例を追加する必要がなくなったという理由で、この問題を解決します。指し示す。 誰かがリポジトリに特定の例を積極的に提供したい場合は、何かを言ってください。これを再開できます。

そして、はい、議論と例に貢献してくれたすべての人に感謝します！