在上一篇中,我们实现了一个下拉刷新和上拉加载更多的列表,那根据一般的开发步骤,接着应该就是进行网络请求,在网络请求之后更新列表数据和列表的刷新状态。
这篇文章会向大家介绍一下Redux的基本概念以及在页面中如何使用Redux进行状态管理。
文章中的代码都来自代码传送门–NNHybrid。开始之前,我们先看一下最终实现的效果
Redux概念
首先先简单介绍一下Redux的一些概念。Redux是JavaScript状态容器,提供可预测化的状态管理,其工作流程如下:
整个工作流程为:
- View需要订阅Store中的state;
- 操作View(点击了View上的一个按钮或者执行一个网络请求),发出Action;
- Store自动调用Reducer,并且传入两个参数(Old State和Action),Reducer会返回新的State,如果有Middleware,Store会将Old State和Action传递给Middleware,Middleware会调用Reducer 然后返回新的State;
- State一旦有变化,Store就会调用监听函数,来更新View;
Store
Store是存储state的容器,负责提供所有的状态。整个应用只能有一个Store,这么做的目的是为了让组件之间的通信更加简单。
在没有Store的情况下,组件之间需要通信就比较麻烦,如果一个父组件要将状态传递到子组件,就需要通过props一层一层往下传,一个子组件的状态发生改变并且要让父组件知道,则必须暴露一个事件出去才能通信。这就使得组件之间通信依赖于组件的层次结构。此时如果有两个平级的节点想要通信,就需要通过它们的父组件进行中转。
有了这个全局的Store之后,所有的组件变成了和Store进行通信。这样组件之间通信就会变少,当Store发生变化,对应的组件也能拿到相关的数据。当组件内部有时间触发Store的变化时,更新Store即可。这也就是所谓的单向数据流过程。
Store的职责如下:
- 维持应用的state;
- 提供
getState()
方法获取state; - 提供
dispatch(action)
方法更新state; - 通过
subscribe(listener)
注册监听器; - 通过
subscribe(listener)
返回的函数注销监听器。
Action
当我们想要更改store中的state时,我们便需要使用Action。Action是Store数据的唯一来源,每一次修改state便要发起一次Action。
Action可以理解为是一个Javascript对象。其内部必须包含一个type
字段来表示将要执行的动作,除了 type
字段外,Action的结构完全由自己决定。多数情况下,type
字段会被定义成字符串常量。
Action举例:
1 | { |
Action创建函数
Action创建函数就是生成action的方法。“action” 和 “action 创建函数” 这两个概念很容易混在一起,使用时最好注意区分。
Action创建函数举例:
1 | export function init(storeName) { |
Reducer
Store收到Action以后,必须给出一个新的State,这样View才会发生变化。
这种State的计算过程就叫做Reducer。Reducer是一个纯函数,它只接受Action和当前State作为参数,返回一个新的State。
由于Reducer是一个纯函数,所以我们不能在reducer里执行以下操作:
- 修改传入的参数;
- 执行有副作用的操作;
- 调用非纯函数;
- 不要修改state;
- 遇到未知的action时,一定要返回旧的state;
Reducer举例:
1 | const defaultState = { |
拆分与合并reducer
在开发过程中,由于有的功能是相互独立的,所以我们需要拆分reducer。一般情况下,针对一个页面可以设置一个reducer。但redux原则是只允许一个根reducer,接下来我们需要将每个页面的的reducer聚合到一个根reducer中。
合并reducer代码如下:
1 | const appReducers = combineReducers({ |
SearchHousePage使用Redux
Action类型定义
1 | SEARCH_HOUSE_LOAD_DATA: 'SEARCH_HOUSE_LOAD_DATA', |
Action创建函数
1 | export function loadData(params, currentPage, errorCallBack) { |
创建reducer
1 | // 默认的state |
包装组件
1 | class SearchHousePage extends Component { |
从上面的代码使用了一个connect
函数,connect
连接React组件与Redux store,连接操作会返回一个新的与Redux store连接的组件类,并且连接操作不会改变原来的组件类。
mapStateToProps
中订阅了home节点和searchHouse节点,该页面主要使用searchHouse节点,那订阅home节点是用来方便组件间通信,这样页面进行网络请求所需的cityId,就不需要从前以页面传入,也不需要从缓存中读取。
列表的刷新状态由headerIsRefreshing
和footerRefreshState
进行管理。
综上
redux已经帮我们完成了页面的状态管理,再总结一下Redux需要注意的点:
- Redux应用只有一个单一的Store。当需要拆分数据处理逻辑时,你应该使用拆分与合并reducer而不是创建多个Store;
- redux一个特点是:状态共享,所有的状态都放在一个Store中,任何组件都可以订阅Store中的数据,但是不建议组件订阅过多Store中的节点;
- 不要将所有的State都适合放在Store中,这样会让Store变得非常庞大;
到这里,我们实现了列表的下拉刷新、加载更多以及如何使用redux,还差一个筛选栏和子菜单页面的开发,这里涉及到React Native与原生之间的通信,我会在React Native实现一个带筛选功能的搜房列表(3)中分享下如何进行React Native与原生的桥接开发。
另外上面提供的代码均是从项目当中截取的,如果需要查看完整代码的话,在代码传送门–NNHybrid中。
上述相关代码路径:
1 | redux文件夹: /NNHybridRN/redux |
参考资料: