关于Redux

一、 关于React 的运行原理

1）、View

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

2）、Store

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

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

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

3）、Reducers

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

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

当我们粗略的认知上面的这三个核心之后，我们接下来可以用redux去写一些小的程序了：

   如果我们希望展示一个 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，VisibilityFilters，getVisibleTodos 等一些辅助函数。

二、理解 Store: 数据的唯一真相来源

　　我们前面提到了 Store 在 Redux 中的作用是用来保存状态的，相当于我们在前端建立了一个简单的 ”数据库“。在目前的富状态前端应用中，如果每一次状态的修改（例如点击一个按钮）都需要与后端通信，那么整个网站的平均响应时间将变得难以接受，用户体验将糟糕透顶。

根据不完全统计：”一个网站能留住一名用户的时间只有 8S，如果你在 8S 内不能吸引住用户，或者网站出现了问题，那么你将彻底地丢失这名用户！”

所以为了适应用户的访问需求，聪明的前端拓荒者们开始将后端的 “数据库” 理念引入到前端中，这样大多数的前端状态可以直接在前端搞定，完全不需要后端的介入。

三、React 状态“危机”

在 React 中，我们将状态存在每个组件的 this.state 中，每个组件的 state 为组件所私有，如果要在一个组件中操作另外一个组件，实现起来是相当繁琐的。

四、Store是解救者

React 诞生的初衷就是为了更好、更高效率地编写用户界面 ，它不应该也不需要来承担状态管理的职责。

于是备受折磨的前端拓荒者们构想出了伟大的 Store。我们完全不需要让每个组件单独保持状态，直接抽离所有组件的状态，类比 React 组件树，构造一个中心化的状态树，这棵状态树与 React 组件树一一对应，相当于对 React 组件树进行了状态化建模：

可以看到，我们将组件的 state 去掉，取而代之的是一棵状态树，它是一个普通的 JavaScript 对象。通过对象的嵌套来类比组件的嵌套组合，这棵由 JavaScript 对象建模的状态树就是 Redux 中的 Store。

当我们将组件的状态抽离出去之后，我们在使用组件 B 操作组件 C 就变得相当简单且高效。

关于Redux

原文：https://www.cnblogs.com/da2213930569/p/12116237.html