在本文中，作者将教你如何使用React.js和Redux.js前端技术，调用Ruby on Rails API，创建一个完美的全栈Web应用。
作者|安妮-劳雷·查德亚斯
译者|新月|编辑|屠敏
以下是翻译:
学了600多门教学课程，练了四个项目，现在终于可以说说我的最后一个项目了。在熨斗学校参加这个在线软件开发的自学课程的时候，我就知道我要完成五个项目才能毕业。最后一个项目总是显得遥不可及，因为它需要很多我还没有掌握的技能。但是现在，我终于可以提交这个项目了。
最后，这个项目的目标是构建一个漂亮的单页应用，前端有React.js和Redux.js，调用Ruby on Rails API。
单页应用程序
首先，什么是单页应用？单页应用是一个网站或web应用，它根据用户的动作或行为动态地重写当前页面的内容，而不是从服务器加载一个全新的页面。有两种方法可以实现这一点:
在一次页面加载中读取所有页面内容。但考虑到应用的复杂性，可能需要很长时间才能完成，会影响用户体验。在用户事件之后，从服务器请求相应的内容。常见的用户事件包括单击按钮、向下滚动页面、将鼠标悬停在某个元素上、按下键盘上的某个键等。对于复杂的应用程序，第二种方法更常见。毕竟，单页应用程序的存在是因为它可以提供更流畅的用户体验，不会被整页重载打断。
从代码的角度来看，单页应用是指整个应用中只有一个HTML页面，通常称为index.html。
构建应用程序结构
应用程序分为两部分:前端和后端。它是用户交互的部分，也就是用户界面。负责后端服务器和用户界面之间的连接。构建应用程序有两种选择:
第一种选择是将前端和后端放在同一个代码库中。第二种选择是构建两个代码库，一个用于后端，一个用于前端。这有几个好处，一是后端可以被多个前端重用，二是编辑器中管理的目录更小。以上两种方法没有对错之分。基于上面给出的两个原因。在构建应用程序时，我选择使用两个独立的代码存储库，
第一个代码库是后端的。我使用下面的命令在终端中创建一个Rails应用程序作为API，但是没有视图。这与创建普通的Rails应用程序是一样的，只是多了一个参数。
rails新my_app_backend - api
至于前端，我采用了create-react-app生成器。
npx创建-反应-应用我的应用前端
这两个命令可以帮助我构建我需要的所有文档。
关于组件的类型
这个项目的技术要求是至少要写两个容器组件和五个无状态组件。React中的组件是接口的基本组件。它可以接受来自父组件的输入，并且可以重用。
下面是容器组件和无状态组件的详细描述。首先，我们需要解释什么是状态。是状态可能改变的数据。状态改变的原因可能有很多，一个是数据库更新导致状态改变，另一个是用户修改了数据。
容器也称为有状态组件，而无状态组件也称为表示组件。容器和表现组件没有严格的区分，每个开发者可以根据自己的意愿组织每个组件。但是一般来说，容器组件是有状态的，可以通过它的状态变化来跟踪，而表示组件是没有状态的。它可以永远显示传递的道具或固定的内容。
至于本文讨论的应用程序，我决定采用最基本的分段方法。我为API中的每个模型构建了一个容器组件。随着项目的进展，我删除了一些不必要的组件，并添加了一些其他组件。有状态组件基本上是表单。最好的例子就是注册表单和登录表单。在React的形式中，每一次用户输入都会导致状态的改变，可能是本地状态的改变，也可能是Redux存储状态的改变。无状态组件的一个例子是BicyclesList.js中的自行车列表。该组件通过props从CitiesContainer组件接受城市列表，这本身与状态无关。
React中的路由
因为在单页应用程序中不会重新加载完整的页面，所以问题之一就是如何路由。路由在Web应用程序中的作用是确定当用户访问特定网页时需要做什么。在我们的单页应用程序中只有一个视图，所以当用户点击一个链接时，没有办法跳转到另一个视图，就像在Rails应用程序中一样。
凡事都有解决的办法。对于这个问题，我们可以使用react-router库。它有许多功能，包括:
URL显示用户的当前位置，而不仅仅是根页面的URL。用户可以使用浏览器的前进和后退按钮。用户可以在地址栏输入网址，跳转到指定页面。以CitiesContainer为例介绍路由的工作原理:
从“React”导入React从“react-router-dom”导入{ Route }；从“”导入CitiesContainer。/containers/cities container '；classCitiesContainerextendsReact。组件{ render { return } }导出默认应用程序；
使用Path而不是exact path，因此将处理所有包含/cities的路径。CitiesContainer容器的内部如下所示:
containers/CitiesContainer.js从“React”导入React从“react-redux”导入{ connect }；从“react-router-dom”导入{ Route }；从'导入{ fetchCities }../actions/fetch cities '；'导入城市列表自'../components/cities list '；'导入城市页面自'../components/city page '；从'导入自行车列表'../components/bicycle list '；classCitiesContainerextendsReact。组件{ componentDidMount { this . props . fetch cities } render { return = > }/> }/> }/>
) }}const mapStateToProps = state => {return { cities: state.cities }}exportdefault connectReact-router-dom包为开发人员提供了routerProps。这个属性可以将URL的内容作为参数传递给props。在这里，我们可以通过道具访问城市的id，然后对城市进行筛选，找到我们需要的城市。使用Redux
最后，我们谈到了Redux。Redux是什么？这个问题我问过自己，也问过谷歌。我在Youtube上找到这个视频，介绍的很清楚。希望对你也有帮助。Redux的文档告诉我们，Redux是Javascript应用程序的“可预测”状态容器。该文档强调了Redux的四个方面:
可预测的:它有助于编写在所有环境中行为一致的应用程序，并且更容易测试。集中化:应用程序的状态和逻辑的集中化可以实现强大的功能，例如状态持久性。可调:Redux DevTools可以非常方便地跟踪应用程序状态变化的时间、位置、原因和方式。灵活:Redux可以与任何UI层结合使用。Redux在我们的应用中有很多便利，但最重要的一点是，你可以从任何地方访问当前用户的信息。通过在Redux存储中保存用户信息，我们可以从应用程序中的任何地方访问它，而不仅仅是那些通过props传递当前用户的组件。实际上，任何子组件都可以通过以下两种方式之一连接到Redux存储:
使用mapsStateToProps，您可以将状态内容放入Props，而无需从组件访问Redux存储。使用mapDispatchToProps，您可以分发操作，而无需从组件访问Redux存储。这样，状态管理和状态显示可以分开。但这并不是Redux的全部功能。在构建异步动作创建器时，我们仍然使用thunk中间件。
什么是中间件？维基百科的解释是“提供系统软件和应用软件之间连接的软件，以方便软件组件之间的通信”。你可以把中间件想象成胶水。所以thunk可以让我们做以前做不到的事情。thunk函数的参数是dispatch，所以它可以在函数中使用，在本例中是在action creator中。因为可以在函数中使用分派，所以我们可以利用这一点，只在fetch请求结束时分配它。如下例所示，我们仅在所有城市的获取请求完成后才分发它:
actions/fetch cities . js export const fetch cities = = > { return = > { fetch。然后)。然后}) }}
使用fetch实现数据持久化
我们可以通过fetch从服务器获取数据，或者通过POST将数据发送到服务器。GET获取数据的方式可以参考前面讨论路由时提到的CitiesContainer的例子。在下面的动作控制器中，我们使用fetch获取所有城市:
actions/fetch cities . js export const fetch cities = = > { return = > { fetch。然后)。然后}) }}
在“身份验证”部分，登录到操作创建者是通过POST向服务器发送数据的一个示例:
actions/auth . js export const log in = credentials = > { return = > { fetch })。然后)。然后{ alert } else { dispatch)dispatch)} })。catch } } export const setCurrentUser = USER = > { return { type:' SET _ CURRENT _ USER '，payload:USER } } export const resetLoginForm = = > { return { type:' RESET _ log in _ FORM ' } }
至于styles，我最初的计划是使用React版本的Bootstrap，因为这是我唯一听说过的库。我是风格新手，找不到导航栏，就在React里搜索了一下有没有可用的框架。然后我在这篇文章里看到了语义UI的菜单组件React，这正是我需要的。我没用过其他风格的框架，所以没办法把语义UI和其他组件对比，但是我必须说语义UI非常好用。
风格不是这个项目的重点，但我计划在这个应用程序中实现这种风格。我已经建立了基础设施和基本功能，现在添加新功能更容易了。我计划继续改进应用程序的功能。
原文:https://medium.com/@ Anne laurel . developer/my-first-full-stack-web-application-8 AC 82 db 6 b 10
这篇文章是CSDN翻译的。转载请注明出处。
【结束】
