关于Redux

1、 关于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 等一些辅助函数。

2、理解 Store: 数据的惟一真相来源

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

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

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

3、React 状态“危机”

在 React 中，咱们将状态存在每一个组件的 this.state 中，每一个组件的 state 为组件所私有，若是要在一个组件中操做另一个组件，实现起来是至关繁琐的。

 

4、Store是解救者

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

因而备受折磨的前端拓荒者们构想出了伟大的 Store。咱们彻底不须要让每一个组件单独保持状态，直接抽离全部组件的状态，类比 React 组件树，构造一个中心化的状态树，这棵状态树与 React 组件树一一对应，至关于对 React 组件树进行了状态化建模：

 

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

当咱们将组件的状态抽离出去以后，咱们在使用组件 B 操做组件 C 就变得至关简单且高效。