Redux: 真实世界的例子（包括 CRUD、高级模式等）

我很想有一个官方的 CRUD 示例来处理：

• 验证
• 正常化
• 乐观更新
• 本地编辑
• 实体关系
• 分页

如果您想围绕此建立一门课程，那真是太棒了。 但是，我认为将示例本身贡献给这个 repo 很重要，这样我们就可以维护它并使其与最新的更改保持同步。 因此，它应该与我们在现有示例中使用的构建系统和约定一致。

这有意义吗？

我也很想看看人们在哪里从 API 获取数据。

@gaearon内容/代码将是开源的，所以没问题。 我们只是要求在页面上的某个地方提供一个返回给我们的链接:)（编辑 - 使用现有的构建系统/约定对我们来说也是可取的）

@sebastiandeutsch你能详细说明一下吗？

不久前，我开始monogram和eccrypto编写密码管理器。 存储密码并共享它们，而无需使用 ECIES 以未加密的形式通过网络发送它们。 从来没有真正完成它，但它可以很好地满足https://github.com/rackt/redux/issues/1353#issuecomment -178760036 中的所有项目。 这听起来有趣吗？

@vkarpov15

这听起来确实很有趣，但恐怕它有点过于特定于领域了。 大多数人都希望看到一个通用的 CRUD 示例（可以链接到任一项目的可编辑项目列表等），我担心加密焦点可能会使该示例不那么平易近人。

我对带有乐观更新的本地/离线编辑很感兴趣，我有一些时间，但我对 redux 应用程序没有那么丰富的经验，我只有一个复杂的本机应用程序，但几乎完全是本地/离线的。
也许我们可以编写一个 repo 并对其进行处理并逐步讨论？
那么“模块化”应用程序呢？
只是为了分享一些想法，我写了一些关于我认为离线第一个应用程序应该如何的想法，如果您有时间花在上面，请试一试！ :)

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

不确定问题的普遍程度以及本课程的开发人员的目标级别是什么，但我想在网上看到如何构建在 react+redux 中实现的复杂应用程序组件（如多步骤表单或向导状态由多个减速器控制），因此它们可以作为一个整体在另一个应用程序中重用。

@sompylasar请随时在 React Redux 存储库中创建一个关于此的问题。 我很高兴在那里讨论重用或隔离 Redux 感知组件的方法。

如果您正在寻找初学者级别的 crud 示例，那么总是有 todo-mvc 和“babel+redux+react+webpack 入门”教程大军。 我不确定另一个有多大价值，我最终每周都会阅读一些关于这个主题的新博客文章（但也许你可以构建一个自动生成这些教程的应用程序？:p）。 我认为更中级的教程更有价值，而 IMO 学习加密可能是一个诱人的附带好处。

我不是在寻找初学者级别的示例，但 CRUD 的复杂部分（分页、规范化、乐观更新、关系）应该是示例的重点。

这会使用自定义 API 还是现有 API？ 还是组合？

这是一个很难回答的问题。 我不知道。 Github API 可能是一个好主意，因为它是可写的并且每个人都熟悉它的概念。 我知道@ryanflorence从事过类似的工作。

绝对针对中高级开发人员； 初学者的 tuts 已经饱和，很少涉及上面列出的（现实世界）更难的主题 Dan。

我对自定义和/或现有 API 持开放态度 - 我们很乐意在我们的 aws 帐户上托管任何自定义 API。 我们还为 Medium.com 克隆提供了一个完整的 API，我们正在为我们可以使用的其他一些课程构建它，如果人们感到好奇，后端源代码也将可用。 如果这听起来很有趣，很高兴分享细节。

@EricSimons我很想了解更多关于 Medium 克隆的信息。

@cshenoy当然。 我们正在构建一个全栈 JS 课程，它将 React/Redux 作为前端，Node 作为后端。 我们将为不想在本地运行的人独立托管后端 API，因此它可能非常适合教授上述一些更复杂的主题。 Medium 克隆的功能集包括以下内容：

• 身份验证（电子邮件/密码和 oAuth、JWT）
• 用于博客文章和博客文章评论的 CRUD
• 关注用户
• 所有博客的全球供稿以及您关注的用户的博客的供稿
• 标签系统
• 用户个人资料/编辑个人资料信息

最终代码库的预计到达时间是本周末，所以我会在那时获得更多信息。 我们将所有东西都设计为超级模块化，因此添加附加功能将是微不足道的。

时间表（时间跟踪器）确实锻炼了flux/redux 和crud 的许多复杂方面。 当您来回滚动数天和数周时，分页和缓存是显而易见的需求。 还有很多可写的 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 ？ 作为您在上面所做的事情的替代方案，它可以让您从您的行动中分派

@babsonmatt是的，我已经在使用它了。 我的应用程序基于使用它的真实示例。 也许我没有使用它的全部功能。

@jonathaningram谢谢你的例子。 正如所指出的，您应该将重定向逻辑移至动作创建者的 thunk，并从那里分派路由更新。 有更多管理副作用的方法（重定向是由该操作引起的状态转换的副作用），例如 redux-saga 或 redux-side-effects。 但我认为深入讨论超出了这个问题的范围。

@sompylasar谢谢。 是的，我不想回避这个问题，只是想分享我作为 redux 初学者的“现实世界”经验，希望能帮助解决这个问题的新例子。

@EricSimons我有兴趣提供帮助。 我目前正在使用nuclear-js 维护一个CRUD 应用程序，我认为它的很多想法都可以很好地转化为redux。 如果您想进行头脑风暴，请告诉我。

我最近启动了一个 CRUD（基于 REST）状态管理的项目。 从Marionette/Backbone开始，当我开始研究 React/Redux 时，我真的很想念 REST 约定。

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

我不确定解决方案是否是示例。 我认为图书馆在这方面做得更好。 状态管理几乎总是一样的，在 2016 年我们不应该编写 CRUD 代码，而是专注于我们的业务逻辑。

@EricSimons我目前正在评估在何处指定数据需求以及何时获取数据的不同选项。 一种选择是实现一些 Relayish - 但我觉得这有点矫枉过正。 我为一个项目所做的事情是在带有 loader 属性的路由中指定我的加载需求：

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 是一个实现两个功能的类：

• 如果 store 需要同步，则需要 NeedToSyncStore(params, store) 返回 true，否则返回 false
• syncStore(params, store) 将同步存储并返回一个承诺

这是一个非常基本的示例实现，绝对可以用更智能的东西（例如 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 状态树。

下一部分是一个商店加载器，它是一个受@ryanflorence AsyncProps（https://github.com/rackt/async-props）启发的反​​应组件，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 你的想法在这里看起来很酷。

我想象这个例子应该更通用，而不是围绕数据获取的抽象进行定制。 我真的很喜欢https://github.com/optimizely/nuclear-js/tree/master/examples/rest-api作为为 Rest API 设置存储和操作的简单方法的基本示例。

我已经扩展了它以支持缓存，甚至将正在进行的请求存储在一个存储中（这样如果再次发出请求，调用者只会得到一个延迟而不是重新启动 xhr。我正在谈论的一个更强大的例子是here ： https : @jordangarcia的一些概念并取得了巨大成功。我认为这里的方法可以很好地适用redux 也是如此（伴随着 normalizr 等）。

@EricSimons是更多关于主题和寻找好的可写 API 的问题，还是您正在寻找特定的方法？

我最感兴趣的是主题（因为最坏的情况是我们可以托管我们自己的可写 API 供人们使用）。 非常感谢上面的所有评论者，到目前为止，这个讨论非常棒。 希望听到更多关于我们应该在这些示例中涵盖的内容的想法/想法。

仅供参考 @dan-weaver 和其他对此感兴趣的人 - 随时给我发个便条[email protected]

在 Meteor 世界中，有一个很大的开源示例项目源于一本关于 Meteor 的书。 这个项目是Telescope ，它是一个类似于 Reddit 或 Hacker News 的 Web 应用程序。 如果 Redux 有一个类似的例子，那就太好了。 许多开发人员通过遵循本书并构建一个较小版本的 Telescope 来学习 Meteor。 像 Telescope 这样的应用程序将涵盖 Dan 在大多数开发人员已经熟悉的应用程序上提出的所有主题（因为 Hacker News、Reddit 等）。

几个月前，我开始在webapp * 上为类似的应用程序创建基础。 这个项目已经建立了构建过程、css 模块、身份验证、API 的单独服务器、MongoDB、服务器端渲染、GraphQL 等（尽管有些东西可能有点过时，需要做更多的工作，或者可以完成）更好的）。 它进一步具有减速器分裂，我相信没有其他例子有。 它缺乏的重要东西是数据获取、乐观更新、实时数据的良好解决方案。 此外，它有点过时了，因为现在一切进展的速度似乎是永恒的 2 个月 :)

如果您想要一个为课程创建示例的起点，也许 _webapp_ 可能是一个灵感。 我很想看到在 Redux 中完成类似于 Telescope 的事情。

*_专有技术文件夹包含有关架构/决策的一些信息。_

_Sidenote:_ 因为我注意到 Redux 没有数据获取的故事，我目前正在创建一个类似于 Relay 的系统，它与 Redux 集成。 这就是我 2 个月没有更新 _webapp_ 的原因。 如果我成功创建了该系统，我将继续使用它 _webapp_。

面临的一个问题是，Redux 的级别非常低，因此对您_实际上_围绕它构建应用程序的方式没有任何意见。 因此，我不确定我们是否可以简单地维护 _one_ 示例代码库来学习，因为在 redux 和最终用户界面之间有很多可能的有效抽象。 本主题中的一些讨论说明了这一点，其中提出了许多不同的数据加载可能性，但没有明确的赢家——没有一种正确的方法，因为应用程序的规模差异很大。

出于这个原因，将“_The_ Advanced TODOMVC of Redux”加入到需要 Dan 之前提到的所有高级功能的规范中是可取的。

随着我们的前进，我相信我们将开始看到更多抽象/库/框架 _around_ Redux，它们可以使用这个高级应用程序作为概念验证。 事实上，随着时间的推移，这可能会被重新命名为非 Redux 特定的。

在 API 方面，我很乐意看到它遵循某种标准（ JSON-API为非规范化和描述关系提供了极好的基础）并最终在此之前拥有一个 GraphQL 服务器。

至于如何将其构建为社区，我怀疑我们可以拥有一个核心存储库，其中包含应用程序规范、服务器实现以及所有当前实现的列表/比较图表。

一方面，但部分相关，请注意这里的特定主题，我认为我们最好优先解决这个问题，以澄清 Redux 的范围 - 强调低级性质。

附言。 我很快将在React London 上进行“Real World Redux”演讲（希望我有时间探索手头的更高级问题），所以请注意：D

我愿意为此努力，我认为为新手提供一个可用的、评论和解释过的 Redux 应用程序，它不是待办事项列表是一个好主意。 @EricSimons 是否已经开始了这方面的工作？

关于如何减少redux的样板文件并用它构建一些真实世界的东西，似乎有很多类似的问题。 我想我找到了一个很好的解决方案（除其他外），我在这里写的：

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

TL;DR：您可以创建redux提供程序，根据他们的propTypes自动将自己与您的组件匹配。 您真正需要的只是一个components目录、一个providers目录和一个可选但推荐的themes目录。 一切都易于互换、可理解、可维护、可扩展和可重用。 还有更多的内容，比如热重载客户端和服务器、服务器渲染等，等等。我今天早些时候基于包含的样板从头开始构建了一个应用程序，它花了大约 10 分钟而不是通常需要1小时。 :)

根据作为早期反应采用者的经验，我宁愿不在示例中使用 Github API。

• 对于寻找“正常工作”的东西的人来说，它的身份验证过于复杂。
• 它不适合实验。 为了避免在进行 API 突变时具有破坏性，我必须创建一个单独/一次性的 Github 帐户。

相反，请使用简单的自定义 API。 我们不想依赖第 3 方，并允许任何人像json-server BottledAPI 示例(

这也将允许在 Javascript、Java、C#、PHP 等中实现其他后端后端。这将有助于启动开发，因为它非常关键。

顺便说一句，在我上面评论的链接中，有关于如何构建博客应用程序的详细信息。 我计划在下周内添加用户身份验证和所有这些。

嗨，大家好！ 我正在学习 ReactJS，并使用 React + Redux 开发了一个我的个人 URL 缩短器版本。 我的示例使用 Gulp + Browserify + Babelify 进行前端开发。 我使用 Mocha 和 Enzyme 为组件和动作编写了单元测试。 这个例子还有：

• 创建、读取和更新操作
• 使用 Json Web 令牌进行身份验证
• 分页
• 标签
• CORS

界面和可用性存在一些错误。 但它的工作=）
也许有人可以将其用作现实世界示例的基础。

演示： https :
来源： https :

我接受有关如何改进此示例的建议。 谢谢！

参加聚会有点晚，但我刚刚推出了一个基于 Redux 构建的成熟的管理 Web 应用程序。

我们将redux-thunk用于异步作业，并使用redux-ignore提供了令人惊讶的改进（_on mobile_），只需过滤我们的顶级减速器。
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 存储库。 随意加星/观看，一旦代码库在线并准备好进行审查，我也会在此线程中发布更新。

很高兴回答任何问题并感谢大家的精彩讨论！

听起来不错。 准备好后，请务必在相关的 Redux 常见问题解答中添加提及和链接。

正如承诺的那样，代码库已准备好在https://github.com/GoThinkster/redux-review进行审查，很想听到大家的反馈。 欢迎提出问题和 PR！

嘿伙计们，非常感谢您的精彩讨论并提供了一个很棒的现实世界示例。

只是为了添加到此类示例列表中，我遇到了这个示例https://github.com/andrewngu/sound-redux ，部署到https://soundredux.io/ 的工作演示@gaearon所说的标准。 但我不确定，所以如果有人可以提供反馈会很有帮助。 如果它确实符合条件，那将是很好的添加到列表中。 加上它在过去一年半的积极维护。

最后，特别感谢@EricSimons提供了令人敬畏的真实世界示例。

我确实在http://redux.js.org/docs/faq/Miscellaneous.html#miscellaneous -real-projects 添加了一个 FAQ 条目，指向许多现实世界的 React 和 Redux 应用程序。 （实际上，我知道我以前看过那个 Sound-Redux 应用程序，但我认为我没有将它添加到我的列表中。我必须这样做。）

我将继续并关闭这个问题，理由是似乎不再需要立即将更大的示例直接添加到 Redux 存储库，考虑到我们可以使用的“真实”应用程序的数量指向。 如果有人想为 repo 积极贡献一个特定的例子，请说些什么，我们可以重新打开它。

是的，感谢所有提供讨论和示例的人！