Redux的基础概念理解

在学习React时了解到能够用Redux来做为React应用的状态管理器，那么redux究竟是什么呢？该怎么使用呢？我须要好好了解一番

为何React 须要 Redux 这类状态管理库

为了方便组件间的通讯

React组件有两个很重要的属性叫props和state，他们本质是一个JavaScript对象。 props属性是只读的，它们老是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。 state属性用来维护组件内部数据。该属性是私有的，而且彻底受控于当前组件。

• this.state 来得到state对象
• this.setState() 来更新state对象 当用户操做、网络响应或者其余变化而须要动态更新UI的时候，咱们经过更新其state来实现。

在 React 中，父组件向子组件通讯很容易，可是祖父向孙子，子向父，兄弟组件间的通讯则比较麻烦，须要经过props由上到下层层传递，或者由下到上层层回调，若是层级太深，显然实现起来很麻烦。而在实际的大型的应用，这几种场景是没法避免的，因此须要借助 Redux 来解决这个问题。

那Redux是如何解决的呢？简单来讲就是，整个应用的状态state存储在一个 叫作 Store 的对象里。使得应用的整个状态存储在同一个地方。任何组件都能直接访问到它，改变它，不过改变state也须要遵循必定的约束规则，让状态变化结果变得能预测。当数据状态发生变化后，使用到数据的地方也会被通知到。

所以，有了Redux来做为状态管理器，组件间的通讯就很是方便了。祖父组件向孙子组件传递state信息再也不须要经过父组件来传递了。相同的，孙子组件向祖父组件传递数据也不须要经过调用父组件回调函数来实现了。

Redux基础知识

Redux官方文档

Redux是什么

Redux是一个前端开发库，是 JavaScript 程序的可预测状态容器，用于整个应用的状态管理。提供最简化 API，作到行为的彻底可预测。使得 Redux 开发的应用易于测试，能够在不一样环境中运行，并显示一致的行为。

Redux 和 React 之间没有关系。Redux搭配React使用很是好用而已。除此以外，Redux还支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。

Redux遵循的三个原则

Redux 不容许程序直接修改数据，而是用一个叫做 “action” 的普通对象来对更改进行描述。

• 单一数据源 整个应用的数据状态都存储在一个叫作 Store 的对象里。使得应用的整个状态存储在同一个地方。单一状态树能够更容易地跟踪随时间的变化，并调试或检查应用程序。

• 不能直接修改state 不能像在React中经过this.setState() 来更新state对象，改变状态的惟一方法是去触发一个动做。动做是描述变化的普通 JS 对象。该操做是对数据更改的最小表示。

• 使用纯函数进行修改 为了指定状态树如何经过操做进行转换，须要使用纯函数保证结果的一致性。每次相同的 action操做做用于相同的状态，获得的新的状态必定要是相同的。

Redux核心概念

Redux基于遵循的三个原则，核心概念有：

• store – 整个程序的状态/对象树保存在Store中。
• action – 这是一个用来描述发生了什么事情的对象。
• reducer – 这是一个肯定状态将如何变化的地方。
• dispatch – 触发action，将action和reducer对应起来。
• applyMiddleware - 这是 action 被发起以后，到达 reducer 以前的扩展点。
• view - 展现状态信息的UI。

store

原则1的实践

应用中全部的 state 都以一个对象树的形式储存在一个单一的 store 中。

action

原则2的实践

惟一改变 state 的办法是触发 action，一个描述发生什么的对象。本质上是 JavaScript 普通对象。Redux中约定了action 内必须使用一个字符串类型的 type 字段来表示将要执行的动做。多数状况下，type 会被定义成字符串常量。

强制使用 action 来描述全部变化带来的好处是能够清晰地知道应用中到底发生了什么。若是一些东西改变了，就能够知道为何变。action 就像是描述发生了什么的指示器。

reducer

原则3的实践

为了把 action 和 state 串起来，开发一些函数，这就是 reducer。reducer 只是一个接收先前的 state 和 action，并返回新的 state 的纯函数。

reducer是纯函数，必定要保持纯净。只要传入参数相同，返回计算获得的下一个 state 就必定相同。没有特殊状况、没有反作用，没有 API 请求、没有变量修改，单纯执行计算。

reducer是纯函数。它仅仅用于计算下一个 state。它应该是彻底可预测的。屡次传入相同的输入必须产生相同的输出。

Dispatch

原则2的实践

dispatch派发action来调用reducer方法，从而更改数据。

applyMiddleware

中间件函数用来对store.dispatch函数进行扩展（或者说是加工）。它提供的是位于 action 被发起以后，到达 reducer 以前的扩展点。 你能够利用 Redux middleware 来进行日志记录、建立崩溃报告、调用异步接口或者路由等等。

参考资料

为何 React 须要 Redux 这类状态管理库