Redux在 官网 上是这么定义的: A Predictable State Container for JS Apps ,直译过来就是一个使用在JS应用上的可预测的状态容器。

Redux解决的问题

React Native 本身是基于前端的 React 框架,它是通过 State 来管理页面显示和参数更新。如果在交互比较复杂的页面、需要多页面状态传递或者同步更新状态的情况,状态管理就会比较麻烦。使用 Redux 就可以解决这些问题。

Redux的核心逻辑和概念

Redux的核心逻辑是集中定义和管理状态和动作执行,各个页面使用 connect 方法绑定相应的方法和状态,并通过发送动作指令更新页面显示。达到状态和操作与页面隔离的效果。

State

State即状态,是 React 框架最基础的概念之一,通过更改状态实时更新页面显示。

【React Native教程】Redux入门教程

Action

Action是指指令或者动作。在 Redux 中,页面不直接管理状态,每个页面都是通过发送 Action间接地更新状态。 Action 中有两个参数,一个是 Type ,字符串类型,代表 Action 的类型和唯一标识,一个是 payload ,代表传递的参数,可以是任意类型。

【React Native教程】Redux入门教程

Reducer

Redux 中状态和动作都是集中管理,管理者被称为 Reducer , Reducer 接收 State 和 Action 参数,根据传过来的 Action 类型和参数进行处理并更新 State 。

【React Native教程】Redux入门教程

Slice

在以往的 Redux 使用中,我们需要自己创建 Action 和 Reducer ,并用 Switch 或者 if else 语句区分不同的 Action ,步骤非常繁琐。现在 Redux 官方推荐使用更方便更现代化的工具 @reduxjs/toolkit ,这个工具集成了 createAction 、 createReducer 等方法,非常方便。不过这两个方法一般也不用,在 tookit 提供了一个新的类 Slice ,创建**Slice时也会同时创建State 、 Reducer 和 Action 。

【React Native教程】Redux入门教程

在需要使用 Reducer 和 Action 时,直接抽取即可

【React Native教程】Redux入门教程

Thunk

【React Native教程】Redux入门教程

上面介绍的是普通 Action ,但如果是执行的动作需要异步执行后更新状态的就不适用了,因此Redux 引入了中间件 Thunk ,在引入 @reduxjs/toolkit 后创建异步 Action 方法如下:

在上面的代码中,在 condition 可以控制这个异步 Action 是否可以继续执行,如果返回 false , Action 会终止执行而且没有回调。如果希望返回 false 后有 rejected 回调,可以设置 dispatchConditionRejection 为 true 。

异步 Action 执行完成后,回调是在 Slice 的 extraReducers 中,异步 Action 有三个状态:pending 、 fulfilled 和 rejected ,分别代表正在执行、成功执行和执行失败

【React Native教程】Redux入门教程

Store

Store是 Redux 的核心类,它的作用是管理所有的 Reducer 和中间件,并作为参数传递到项目的根视图组件中。

【React Native教程】Redux入门教程

Redux在React Native中的使用

下面以一个简单的计数器为例讲解一下如果在 React Native 中使用 Redux 。

安装依赖

首先需要安装 @reduxjs/toolkit ,可以使用 NPM 或者 Yarn 。

【React Native教程】Redux入门教程

然后安装 Redux 核心库

【React Native教程】Redux入门教程

创建Slice

创建 Slice 时会同步创建 State 、 Reducer

【React Native教程】Redux入门教程

在这里创建了名为 count 的 Slice ,计算器初始值为0,并在 Reducer 中定义了两个 ActionincrementAction 和 decrementAction ,根据传过来的参数确定每次加减的数值。后面两行 export 代码确保外部能够访问这里创建的 Action 和 reducer 。

创建Store

接下来就是创建 Store ,创建时会传入刚刚创建的 reducer 。

注意:在页面获取状态值的时候中间一定要先获取 reducer ,然后再获取 reducer 里的状态值,例如获取 countReducer 里的 value : state.count.value 。

【React Native教程】Redux入门教程

至此, Redux 部分就准备好了,接下来就是页面的交互部分了。

页面嵌入Redux

index.js 文件中将 Provider 更改为 App 的根控件,并传入 store 作为参数:

【React Native教程】Redux入门教程

下面是 App.js 的主要代码

【React Native教程】Redux入门教程

上面的 TextInput 用于输入每次增加或者减小的数值,下面有一个加号按钮和一个减号按钮,中间是显示当前数值的文本。

mapStateToProps 和 mapDispatchToProps ,的作用是映射 Slice 中定义的 State 和 Action到当前页面,在使用时直接 this.props.value 调用即可。最后通过 Redux 的 connect 方法将这些映射和当前页的组件连接起来。

 

相关文章: