react native之Redux学习记录总结

Redux是JavaScript状态容器，提供可预测化的状态管理。

Store 是redux提供的唯一数据源，它存储了整个应用的state，store是只读的， RN的Redux 应用只有一个单一的 store。

通俗来讲，就是我们使用action来描述执行的动作，用reducers来响应action引起的state后果。

Store 就是把redux所需要的联系到一起的对象。Store 有以下职责：

• 维持应用的 state；
• 提供 getState() 方法获取 state；
• 提供 dispatch(action) 方法更新 state；
• 通过 subscribe(listener) 注册监听器;
• 通过 subscribe(listener) 返回的函数注销监听器。

Provider组件 本身并没有做很多事情，只是把 store放在 context 里提供给其子组件。这样才能实现redux 我们针织可以在组件中直接调用store this.context.store.dispatch(action);（并没有什么卵用）

Action 是一个用于描述已发生事件的普通对象，并不知道你干的这件事产生了什么效果，并没有描述应用如何更新 state，action会携带一个type属性最后传递给reducer；（Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源，一般来说会在 store.dispatch() 通过对应的reducer中的规则返回的state将 action 传到 store）

（dispatch） action：redux没有提供直接修改数据的方法，改变state的唯一方法就是触发这个方法，组件可以dispatch action给store，而不是直接通知其他组件，其他组件可以通过订阅store中的state来刷新自己的视图。

currentState = currentReducer(currentState, action);

将使用当前 getState() 的结果和传入的 action 以同步方式的调用 store 的 reduce 函数。它的返回值会被作为下一个 state。从现在开始，这就成为了 getState() 的返回值，同时变化监听器(change listener)会被触发

 

Reducer 专门负责描述某个行动对应产生某种效果的机构，只是一个接收state和action，并返回新的state的函数 最终会组成一整个大的state 渲染页面。

reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state，每次state变化都会调用， 有变化返回当前nextState，没变化直接返回state。

比较笼统的reducer拆分成了多个专注于不同功能的reducer，最后使用combine方法合并。每个 reducer参数都不同， 只负责管理全局 state的一部分。分别对应它管理的那部分 state 数据，区别不同部分的状态树响应action。

 

CombineReducers 所做的只是生成一个函数， 将这些reducer合并成为一个rootReducer。rootReducer可以调用你的一系列 reducer，每个 reducer 根据它们的 key 来筛选出 state 中的一部分数据处理返回一个state，rootReducer会把它们返回的 state 按其传递给 combineReducers() 时对应的 key 合成一个 state 对象。

源码注释更加清楚：It will call every child reducer,and gather their results into a single state object.

 

connect函数

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

第一个参数：mapStateToProps 使得UI组件状态props就与Redux的state关联上

第二个参数：mapDispatchToProps 使得UI组件的props就与相关的actions关联上了

这两个参数的数据都在store中，这样，组件当中调用props.xxx实际调用的是Redux中的store.dispatch(xxx) action

在新的基础架构中，通过connect方法把store中“指定的state & 指定的action”和 React组件 连接起来 ==> 容器组件，容器组件就是使用 store.subscribe() 从 Redux state 树中读取部分数据，并通过 props 来把这些数据提供给要渲染的组件。connect方法做了性能优化来避免很多不必要的重复渲染，你可以手工来开发容器组件。

 

整个dispatch执行action流程总结 ：

1.我们想要修改一个状态值,这个状态值要关联props。然后为了修改他，创建了一个action并关联props，为了处理修改了这个值造成的影响，需要有关联props的reducer来实现。

2.准备工作做好，我们来触发这个action（store.dispatch(action)），数据源就会根据reducer定义好的规则来对state进行处理 ，最终返回一个state ，然后redux会合成一个完整的store里的state进行UI更新。

 

Middleware 只是包装了 store 的 dispatch 方法。技术上讲，任何 middleware 能做的事情，都可能通过手动包装 dispatch 调用来实现，但是放在同一个地方统一管理会使整个项目的扩展变的容易得多

middleware接受三个参数：store，action，next，在redux中相当于直接替换store中的dispatch，在原先的dispatch中加上我们想要统一执行的代码，把原来的store.dispatch放到next里面，用来增强dispatch的作用。

ApplyMiddleware是redux附带的唯一store扩展功能。在这个方法里，主要就是连接各个middleware。