React Native 是 Facebook 推出的跨平台移动应用开发框架，可以同时支持 iOS 和 Android 平台的开发。Redux 则是一个 JavaScript 状态管理工具，可以帮助我们方便地管理应用的状态。在 React Native 的开发中，Redux 的应用已经变得越来越普遍。
本文将介绍作者最近开发的一个 React Native Redux 实战项目的总结，同时深入分析该项目的工程代码。希望本文能够帮助读者更深入地学习 React Native 和 Redux 的实际应用。
项目概述
本项目是一款移动电商应用，主要包含以下几个功能：
- 用户注册/登录
- 商品列表展示
- 商品搜索
- 加入购物车/购物车管理
- 提交订单/订单管理
- 用户个人中心
项目涉及前后端交互，需要使用 Restful API 进行数据传输，其中前端采用 React Native + Redux 实现。
具体开发环境和使用的工具如下：
- React Native v0.64.0
- React Navigation v5.9.4
- Redux v4.0.5
- axios v0.21.1
- ESLint v7.32.0
- Prettier v2.4.1
技术要点
Redux 中间件
在本项目中，作者使用了 Redux 的中间件来处理异步请求。具体来说，作者使用 redux-thunk 来实现 action 的异步调用。下面是一个典型的使用 redux-thunk 的 Redux action：
-- -------------------- ---- -------
------ ----- ---------------- - ----------- - --- -- ----- ---------- -- -
--- -
------------------------------------
----- -------- - ----- -------------------- - ------- - ------------ ---------- - ---
-------------------------------------------------
- ----- ------- -
-----------------------------------------------
-
--可以看到，上述代码定义的 fetchProductList 函数返回的是一个异步函数。通过 await 关键字，我们能够在异步请求返回之后再更新 Redux 中的 store。这种方式能够让我们更方便地管理异步请求的状态。
Redux Persist
Redux Persist 是一个可以帮助我们快速存储和加载 Redux store 的库。在本项目中，作者使用了 Redux Persist 来存储用户的登录状态以及购物车状态。以下是一个典型的使用 Redux Persist 的 Redux store 配置：
-- -------------------- ---- ------- ----- ------------- - - ---- ------- -------- ------------- ---------- -------- -------- -- ----- ---------------- - ----------------------------- ------------- ----- ----- - ----------------------------- --------------------------------- --- --------- - -------------------- ------ - ------ --------- --
可以看到，我们只需通过 persistReducer 函数将原来的 reducer 包装一下即可实现 store 的持久化。
React Navigation
React Navigation 是 React Native 中常用的导航库，它能够帮助我们方便地实现页面跳转等导航功能。在本项目中，作者使用了 React Navigation 来实现各个页面之间的跳转。以下是一个典型的使用 React Navigation 的导航器配置：
-- -------------------- ---- -------
----- ----- - -----------------------
------ ------- -------- ----- -
------ -
---------------------
-----------------
-------------
-----------
----------------------
---------- ------ ------ --
--
------------- -------------- ------------------------- --
------------------
----------------------
--
-以上代码配置了一个 Stack Navigator，其中包含了两个页面：HomeScreen 和 DetailsScreen。我们可以通过不同的 options 属性来对页面进行定制化，比如修改页面标题等。
Eslint + Prettier
在本项目中，作者使用了 Eslint 和 Prettier 来规范代码风格。具体来说，作者使用了 eslint-config-airbnb，它是 Airbnb 公司开发的一套 Eslint 规则集，可以帮助我们规范化代码。同时，作者还使用了 prettier 来实现代码自动格式化，以提高代码的可读性和可维护性。以下是一个示例配置：
{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"rules": {
...
}
}通过以上配置，我们可以同时使用 Airbnb 的规则和 Prettier 的自动格式化功能。
工程代码分析
在上一节中，我们已经介绍了一些本项目中用到的技术要点。接下来，我们将通过具体代码分析来深入学习这些技术。
1. 数据层
数据层主要包括 Redux 相关代码，以及我们的 Restful API 请求代码。本节中我们着重介绍 Redux 相关的代码。
1.1. Reducer
本项目中包含多个 reducer，每个 reducer 主要负责处理一个功能模块的状态。以下是 Auth reducer 的示例代码：
-- -------------------- ---- -------
----- ------------ - -
----------- ------
---------------- ------
----- -----
------------- -----
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------
------ - --------- ----------- ---- --
---- --------------
------ - --------- ----------- ------ ---------------- ----- ----- -------------- --
---- ------------
------ - --------- ----------- ------ ---------------- ------ ------------- -------------- --
--------
------ ------
-
--我们首先定义该 reducer 的初始状态，然后在 switch 语句中根据不同的 action 类型进行处理。每次 reducer 的操作都会返回一个新的 state。
1.2. Selectors
在 Redux 中，selector 是一个重要的概念。selector 是一个返回 store 中某一部分状态的函数，它能够让我们方便地获取特定的状态，以便在组件中使用。以下是一个典型的 selector 来获取购物车状态：
export const getCartItems = (state) => state.cart.items;
1.3. Actions
Actions 是定义在 Redux 中的行为，每个 action 包含一个 type 字段和其他相关字段。以下是一个典型的 action：
export const loginSuccess = (user) => ({
type: LOGIN_SUCCESS,
payload: user,
});我们可以通过使用 Reducer 和 Actions 来实现 Redux 中的状态管理。而使用 Selectors 则可以让我们更方便地获取 state 中的某一部分数据。
2. 视图层
在 React Native 中，视图层代码通常使用 JSX 语法进行编写。本节中我们将介绍一些典型的视图层代码，如登录页面、购物车页面等。
2.1. 登录页面
在本项目中，登录页面包含用户输入用户名和密码的表单和登录按钮。在用户点击登录按钮之后，我们将触发 Redux 中 Auth 模块的登录功能。
以下是一个典型的登录页面的 JSX 代码：
-- -------------------- ---- -------
------ ------- -------- ----------- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- -------- - --------------
----- ----------- - -- -- -
------------------------ -----------
--
------ -
----- -------------------------
----------
--------------------
--------------------------
----------------
----------------------
--
----------
--------------------
--------------------------
----------------
----------------------
---------------
--
------- ------------- --------------------- --
-------
--
-可以看到，我们使用了 useState 来记录用户输入的用户名和密码。而在用户点击登录按钮之后，我们使用 useDispatch hooks 来触发 Redux 的 login action。
2.2. 购物车页面
在购物车页面中，用户可以查看已加入购物车的商品列表，并对其进行删除和修改等操作。以下是一个典型的购物车页面的 JSX 代码：
-- -------------------- ---- -------
------ ------- -------- ---------- -
----- --------- - --------------------------
----- -------- - --------------
----- ---------------- - -------- -- -
---------------------------------
--
----- --------------------- - ------ ------ -- -
----------------------------- --------
--
----- ---------- - ------------------------ ----- -- ----- - ---------- - ----------- ---
------ -
----- -------------------------
---------
----------------
-------------- ---- -- -- -
---------
-----------
------------ -- --------------------------
---------------------- -- --------------------------- -------
--
--
-------------------- -- -------------------
--
----- ----------------------------------- ------ --------------------
------- ---------------- -------------------------- --- -- --
-------
--
-我们使用 useSelector hooks 来获取 Redux 中 cart 模块的状态，可以直接获取存储在 selector 中的数据。同时，在用户对购物车项进行修改和删除的操作后，我们将触发对应的 action 来更新 Redux 中的状态。
总结
本文介绍了一个 React Native Redux 实战项目的总结以及工程代码分析。我们讨论了一些技术要点，比如 Redux 中间件、Redux Persist、React Navigation 等，同时通过具体的代码实例，让读者更好地理解 React Native 和 Redux 的实际应用。我们希望读者能够通过本文的介绍，更深入地学习 React Native 和 Redux，提升自己的开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65371e5e7d4982a6ebf76dec