【React Native教程】Redux入门教程

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

Redux解决的问题

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

Redux的核心逻辑和概念

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

State

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

Action

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

Reducer

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

Slice

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

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

Thunk

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

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

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

Store

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

Redux在React Native中的使用

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

安装依赖

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

然后安装 Redux 核心库

创建Slice

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

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

创建Store

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

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

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

页面嵌入Redux

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

下面是 App.js 的主要代码

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

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