react实现页面打开自动全屏展示_Redux 包教包会（一）：解救 React 状态危机

前端应用的状态管理日益复杂。随着大前端时代的到来，前端愈来愈注重处理逻辑，而不只是专注 UI 层面的改进，而以 React 为代表的前端框架的出现，大大简化了我们编写 UI 界面的复杂度。虽然 React 提供了 State 机制实现状态管理，也有诸如“状态提升”等开发约定，但是这些方案只适用于小型应用，当你的前端应用有多达 10 个以上页面时，如何让应用状态可控、让协作开发高效成为了亟待解决的问题，而 Redux 的出现正是为了解决这些问题而生的！Redux 提出的“数据的唯一真相来源”、单向数据流、“纯函数 Reducers” 大大简化了前端逻辑，使得我们能够以高效、便于协作的方式编写任意复杂的前端应用。本篇教程致力于用简短的文字讲透 Redux，在实战中掌握 Redux 的概念和精髓。

此教程属于React 前端工程师学习路线^[1]的一部分，点击可查看全部内容。

在我们阅读教程之前

Redux 官方文档对 Redux 的定义是：一个可预测的 JavaScript 应用状态管理容器。

这就意味着，Redux 是无法单独运作的，它需要与一个具体的 View 层的前端框架相结合才能发挥出它的威力，这里的 View 层包括但不限于 React、Vue 或者 Angular 等。这里我们将使用 React 作为绑定视图层，因为 Redux 最初诞生于 React 社区，为解决 React 的状态管理问题而设计和开发的一个库。这篇教程将让你直观地感受 React 的“状态危机”，以及 Redux 是如何解决这一危机的，从而能够更好地学习 Redux，并理解它的源起，以及它将走向什么样的远方。

前提条件

本篇教程是关于 Redux 的快速入门教程，并致力于讲解与 React 绑定时的使用，而了解和掌握 Redux 对于一个 React 开发者来说属于较为进阶的内容，所以我们假设在阅读本篇教程之前，你需要拥有以下的知识储备：

•对 ES6 的函数、类、const、对象解构、函数默认参数等概念有良好的了解，当然如果你了解过函数式编程，如纯函数、不变性等就更好了•对 React 有良好的了解，当然如果有独立开发过至少有 5 个页面的 React 应用的经验就更好了，可以参考这篇入门教程^[2]进行学习•了解 Node 和 npm，有过相关的安装依赖的经验即可，可以参考这篇教程^[3]进行学习

你将学到什么

在本篇教程中，我们将首先给出了一个使用 React 实现的待办事项小应用^[4](比上篇教程^[5]中完成的版本多了筛选的功能)，它将是我们学习 Redux 的起点，当你熟悉了这份初始代码，并了解了它的功能之后，你就可以关闭它，然后开始我们教程的学习啦！

我们将基于这个纯 React 写成的模板，分析 React 在处理状态时存在的问题，以及用 Redux 重构带来的优势。接着我们将通过实战的方式学习如何将一个纯 React 应用一步步地重构成一个 Redux 应用，最终实现一个升级版的待办事项小应用。

代码和最终效果

本教程所实现的源代码都托管在 Github 上：

•纯 React 源码：源码地址^[6]。•使用 Redux 重构后的源码：源码地址^[7]。

你可以通过 CodeSandbox 查看代码最终的效果：

•纯 React 效果：最终效果地址^[8]。•使用 Redux 重构后的效果：最后效果地址^[9]。

开始 Redux 之旅

不管外界把 Redux 吹得如何天花乱坠，实际上它可以用一张图来概括，这张图也有利于帮助你思考前端的本质是什么：

我们先来详解一下这张图，并且在教程之后的内容中，你会多次看到这张图以不同的形式出现。我们希望学完本篇教程之后，每当你想起 Redux 时，脑海里就是上面这张图。

View

首先我们来看 View ，在前端开发中，我们称这个为视图层，就是展示给最终用户的效果，在本篇教程的学习中，我们的 View 就是 React。

Store

随着前端应用要完成的工作越来越丰富，我们对前端也提出了要保持 “状态” 的要求。在 React 中，这个 “状态” 将保存在 this.state。在 Redux 中，这个状态将保存在 Store。

这个 Store 从抽象意义上来说可以看做一个前端的 “数据库”，它保存着前端的状态(state)，并且分发这些状态给 View，使得 View 根据这些状态渲染不同的内容。

注意到，Redux 是一个可预测的 JavaScript 应用状态管理容器，这个状态容器就是这里的 Store。

Reducers

我们日常生活中看到的网页，它不是一成不变的，而是会响应用户的 “动作”，无论是页面跳转还是登陆注册，这些动作会改变当前应用的状态。

在 Redux 框架中，Reducers 的作用就是响应不同的动作。更精确地说，Reducers 是负责更新 Store 中状态的 JavaScript 函数。

当我们对这三个核心概念有了粗略的认知之后，就可以开始 Redux 的学习了。

准备初始代码

将初始 React 代码模板 Clone 到本地，进入仓库，并切换到 initial-code 分支(初始代码模板)：

git clone https://github.com/pftom/redux-quickstart-tutorial.gitcd redux-quickstart-tutorialgit checkout initial-code

安装项目依赖，并打开开发服务器：

npm installnpm start

接着 React 开发服务器会打开浏览器，如果你看到下面的效果，并且可以进行操作，那么代表代码准备完成：

提示

由于我们使用 Create React App^[10] 脚手架，它使用 Webpack Development Server(WDS)作为开发服务器，因此在后面编辑代码的时候只需保存文件，我们的 React 应用就会自动刷新，非常方便。

探索初始代码

我们完成的这个待办事项小应用比上篇教程^[11]中实现的要高级一点，如下面这个动图所示：

我们希望展示一个 todo 列表，当一个 todo 被点击时，它将被加上删除线表示此 todo 已经完成，我们还加上了一个输入框，使得用户可以增加新的 todo。在底部，我们展示了三个按钮，可以切换展示 todo 的类型。

整份 React 代码组件设计如下(首先是组件，然后是组件所拥有的属性)：

•TodoList 用来展示 todo 列表：

•todos: Array 是一个 todo 数组，它其中的每个元素的样子类似 { id, text, completed }。•toggleTodo(id: number) 是当一个 todo 被点击时会调用的回调函数。

•Todo 是单一 todo 组件：

•text: string 是这个 todo 将显示的内容。•completed: boolean 用来表示是否完成，如果完成，那么样式上就会给这个元素划上删除线。•onClick() 是当这个 todo 被点击时将调用的回调函数。

•Link 是一个展示过滤的按钮：

•active: boolean 代表此时被选中，那么此按钮将不能被点击•onClick() 表示这个 link 被点击时将调用的回调函数。•children: ReactComponent 展示子组件

•Footer 用于展示三个过滤按钮：

•filter: string 代表此时的被选中的过滤器字符串，它是 [SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE] 其中之一。•setVisibilityFilter() 代表 Link 被点击时将设置对应被点击的 filter 的回调函数。

•App 是 React 根组件，最终组合其他组件并使用 ReactDOM 对其进行编译渲染，我们在它的 state 上定义了上面的几个组件会用到的属性，同时定义了其他组件会用到的方法，还有 nextTodoId，VisibilityFilt