react-redux

react

 

1. React有props和state: props意味着父级分发下来的属性，state意味着组件内部能够自行管理的状态，而且整个React没有数据向上回溯的能力，也就是说数据只能单向向下分发，或者自行内部消化。

2. 通常构建的React组件内部多是一个完整的应用，它本身工做良好，你能够经过属性做为API控制它。可是更多的时候发现React根本没法让两个组件互相交流，使用对方的数据。

而后这时候不经过DOM沟通（也就是React体制内）解决的惟一办法就是提高state，将state放到共有的父组件中来管理，再做为props分发回子组件。

 

3. 子组件改变父组件state的办法只能是经过onClick触发父组件声明好的回调，也就是父组件提早声明好函数或方法做为契约描述本身的state将如何变化，再将它一样做为属性交给子组件使用。

 

4. 为了面临全部可能的扩展问题，最容易想到的办法就是把全部state集中放到全部组件顶层，而后分发给全部组件。

 

5. 为了有更好的state管理，就须要一个库来做为更专业的顶层state分发给全部React应用，这就是Redux。

先简单说一下redux和react是怎么配合的。react-redux提供了connect和Provider两个好基友，它们一个将组件与redux关联起来，一个将store传给组件。组件经过dispatch发action，store根据action的type属性调用对应的reducer并传入state和这个action，reducer对state进行处理并返回一个新的state放入store，connect监听到store发生变化，调用setState更新组件，此时组件的props也就跟着变化。

redux

首先，redux并非必须的，它的做用至关于在顶层组件之上又加了一个组件，做用是进行逻辑运算、储存数据和实现组件尤为是顶层组件的通讯。若是组件之间的交流很少，逻辑不复杂，只是单纯的进行视图的渲染，这时候用回调，context就行，不必用redux，用了反而影响开发速度。可是若是组件交流特别频繁，逻辑很复杂，那redux的优点就特别明显了。

redux就是用来统一管理项目中的状态（state）。state它能够是先后端的各类数据，也能够是UI上的一些信息。简单点，它就是个对象，包含了项目中可能用于改变的一些信息。

redux重要关注的几点：Actions，Reducers，Store.

redux 的基础概念：

Redux 的核心是一个 store。

store 是一个 JavaScript 对象，经过 Redux 提供的 createStore(reducers) 方法建立。

store 有两个核心方法： getState() 和 dispatch()。

getState() 返回一个 JavaScript 对象，表明 store 当前的状态。

获取store中的state——当咱们用action触发reducer改变了state时，须要再拿到新的state里的数据，毕竟数据才是咱们想要的。getState主要在两个地方须要用到，一是在dispatch拿到action后store须要用它来获取state里的数据，并把这个数据传给reducer，这个过程是自动执行的，二是在咱们利用subscribe监听到state发生变化后调用它来获取新的state数据，若是作到这一步，说明咱们已经成功了。

.dispatch() 接受一个 action 做为参数，将这个 action 分发给全部订阅了更新的 reducer。

action 是一个 JavaScript 对象，一般包含了 type、payload 等字段，用于描述发生的事件及相关信息（使用 Redux 中间件可让你 dispatch 其它类型的 action，此处不展开）。

reducer 是一个 JavaScript 函数，函数签名为 (previousState, action) => newState，即接受 previousState 和 action 两个参数，根据 action 中携带的信息对 previousState 作出相应的处理，并返回一个新的 state。

一、Action:

  action是纯声明式的数据结构，只提供事件的全部要素，不提供逻辑。

function changeTable(index) { return { type: "channgTable", data:index } }
以上例子就是一个action，咱们不用纠结它定义个一个函数形式仍是其它，最终它就是一个对象。包含type、data或者还有其余元素的对象。
action就是用来告诉咱们的状态管理器须要作什么样的一种操做。拿以上例子来讲，就是为了作一个切换table的操做，那么我就定义了这么一个action。data就是你作这个操做须要处理
的一些数据等。

二、Reducer :

reducer是一个匹配函数，action的发送是全局的：全部的reducer均可以捕捉到并匹配与本身相关与否，相关就拿走action中的要素进行逻辑处理，修改store中的状态，不相关就不对state作处理原样返回。

以上例子就是一个reducer，它是一个会对不一样action作出不一样操做的函数。

如当我发出切换table的action时，就是把咱们以前定义action的data传递给state下的tableIndex变量，用来告诉state，我要切换table的序号。

在没有任何操做状况下，咱们返回初始的state。咱们不直接去改变state的值，而是返回一个新的对象，保持state的惟一性。

三、Store:

store负责存储状态并能够被react api回调，发布action.

这就是Store了，用来管理state的单一对象。其中有三个方法：

store.getState()：获取state，如上，通过reducer已经返回了一个新的state，那么就能够用该函数获取；

store.dispatch(action)：发出操做，更新state。action内有操做的类型，就能够出发不一样的对state的更新；

store.subscribe(listener)：监听变化，当state发生更新时，就能够在这个函数的回调中监听。

react-redux

React-Redux 将全部组件分红两大类：UI 组件（presentational component）和容器组件（container component）。

1、UI 组件

UI 组件有如下几个特征。

• 只负责 UI 的呈现，不带有任何业务逻辑
• 没有状态（即不使用this.state这个变量）
• 全部数据都由参数（this.props）提供
• 不使用任何 Redux 的 API

由于不含有状态，UI 组件又称为"纯组件"，即它纯函数同样，纯粹由参数决定它的值。

 

2、容器组件

• 负责管理数据和业务逻辑，不负责 UI 的呈现
• 带有内部状态
• 使用 Redux 的 API

 

总之，只要记住一句话就能够了：UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

react-redux在redux的基础上，就关注两点：Provider和connect。

一、Provider:

Provider是一个普通组件，能够做为顶层app的分发点，它只须要store属性就能够了。它会将state分发给全部被connect的组件，无论它在哪里，被嵌套多少层。

就是把咱们用rudux建立的store传递到内部的其余组件。让内部组件能够享有这个store并提供对state的更新。

 

二、connect:

React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。

上面代码中，TodoList是 UI 组件，VisibleTodoList就是由 React-Redux 经过connect方法自动生成的容器组件。

 

先接受两个参数（数据绑定mapStateToProps和事件绑定mapDispatchToProps），再接受一个参数（将要绑定的组件自己）：

connect()一共有四个参数，但我这里只说基本的两个，mapStateToProps和mapDispatchToProps。

mapStateToProps：简单来讲，就是把状态绑定到组件的属性当中。即将state映射到 UI 组件的参数（props），咱们定义的state对象有哪些属性，在咱们组件的props均可以查阅和获取。

 

 

在props中，咱们就看到了咱们绑定的状态。它的初值就是reducer默认返回state中的值。 

mapStateToProps是一个函数。它的做用就是像它的名字那样，创建一个从（外部的）state对象到（UI 组件的）props对象的映射关系。

做为函数，mapStateToProps执行后应该返回一个对象，里面的每个键值对就是一个映射。

上面代码中，mapStateToProps是一个函数，它接受state做为参数，返回一个对象。这个对象有一个todos属性，表明 UI 组件的同名参数，后面的getVisibleTodos也是一个函数，能够从state算出 todos 的值。

mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，从新计算 UI 组件的参数，从而触发 UI 组件的从新渲染。

mapStateToProps的第一个参数老是state对象，还可使用第二个参数，表明容器组件的props对象。

使用ownProps做为参数后，若是容器组件的参数发生变化，也会引起 UI 组件从新渲染。

mapStateToProps 接受两个参数，store的state和自定义的props，并返回一个新的对象，这个对象会做为props的一部分传入ui组件。咱们能够根据组件所须要的数据自定义返回一个对象。ownProps的变化也会触发mapStateToProps。

connect方法能够省略mapStateToProps参数，那样的话，UI 组件就不会订阅Store，就是说 Store 的更新不会引发 UI 组件的更新。

mapDispatchToProps

mapDispatchToProps是connect函数的第二个参数，用来创建 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操做应该看成 Action，传给 Store。它能够是一个函数，也能够是一个对象。

若是mapDispatchToProps是一个函数，会获得dispatch和ownProps（容器组件的props对象）两个参数。

从上面代码能够看到，mapDispatchToProps做为函数，应该返回一个对象，该对象的每一个键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。

若是mapDispatchToProps是一个对象，它的每一个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被看成 Action creator ，返回的 Action 会由 Redux 自动发出。举例来讲，上面的mapDispatchToProps写成对象就是下面这样。

即将用户对 UI 组件的操做映射成 Action。在redux中介绍过，用store.dispatch(action)来发出操做，那么咱们一样能够把这个方法封装起来，即绑定到咱们的方法中。

能够看到，这个方法return的就是一个dispatch函数，将该方法绑定到属性上，咱们一样能够在props查看和调用。

这样，咱们只要在组件中调用该属性中的方法，就能够发出一个特定的action，触发reducer对state进行更新。

值得注意的是connect，Provider，mapStateToProps,mapDispatchToProps是react-redux提供的，redux自己和react没有半毛钱关系，它只是数据处理中心，没有和react产生任何耦合，是react-redux让它们联系在一块儿。