在 React Native 中使用 Redux 的最佳实践

前言

React Native 是 Facebook 推出的一款跨平台移动应用开发框架,使得开发者能够基于 React 语法编写原生应用的 UI 组件。Redux 是一个流行的 JavaScript 应用程序状态管理工具,它通过单一的“store”(仓库) 来异步处理应用中的状态变化。本文将介绍在 React Native 中使用 Redux 的最佳实践,旨在帮助开发者更好地管理应用程序的状态和数据流,提高应用程序的可维护性、可扩展性和可测试性。

基本概念

在 React Native 中使用 Redux,需要掌握以下几个基本概念:

Action

Action 是一个带有 type 属性的普通对象,用于描述应用中发生的事件。例如,处理一个按钮点击事件可能会触发以下 Action:

-
  ----- ---------------
  -------- - ------ ---- -
-

Reducer

Reducer 是一种纯函数,它接收当前状态和一个 Action,返回新的状态。Redux 仓库需要至少一个 Reducer 函数来管理状态。例如,以下 Reducer 函数处理一个名为“BUTTON_CLICK”的 Action:

-------- ------------- - --- ------- -
  ------ ------------- -
    ---- ---------------
      ------ ----------------- ------ ---------------
    --------
      ------ -----
  -
-

Store

Store 是应用程序状态的唯一来源。每个应用程序只能有一个仓库,它是由一个 Reducer 函数创建的。仓库包含所有应用程序的状态,以及一些辅助函数,比如 dispatch 和 subscribe。

Middleware

Middleware 是一种函数,它可以扩展 Redux 的行为。它位于 Action 和 Reducer 之间,可以拦截、修改或异步处理 Action。例如,以下 Middleware 函数记录每个 Action 和状态变化的时间戳:

----- ------ - ----- -- ---- -- ------ -- -
  --------------------------
  --------------------------- -------
  ----- ------ - ------------
  ----------------- ------- -----------------
  -----------------------------
  ------ ------
-

安装和配置

要在 React Native 中使用 Redux,需要首先安装以下依赖:

--- ------- ----- ----------- ----------- ------

redux 和 react-redux 是 Redux 库和 React Hooks 的绑定,它们不需要额外配置和安装,但是 redux-thunk 是用于处理异步 Action 的常见 Redux Middleware。

接下来,需要创建一个名为“store.js”的文件,并在其中构建 Redux 仓库:

------ - ------------ --------------- - ---- -------
------ ----- ---- -------------
------ ----------- ---- ------------

----- ---------- - ----------------------

------ ------- ------------------------ -----------

其中,rootReducer 是 Reducer 函数的组合,应用程序根据需要使用多个 Reducer 来处理不同的状态。如果需要记录 Action 的类型和时间戳,可以将 logger 中间件作为第二个参数传递给 applyMiddleware。

最后,将创建的仓库注入到应用程序的根组件中:

------ ----- ---- -------
------ - -------- - ---- -------------
------ ----- ---- ---------
------ --- ---- -------

------ ------- -------- ------ -
  ------ -
    --------- --------------
      ---- --
    -----------
  -
-

这样就完成了应用程序的初始化和配置。现在,可以在应用程序中定义和分发 Action,以及注册和使用 Reducer 以及 Middleware 了。

示例代码

以下是一个简单的示例代码,说明了在 React Native 中使用 Redux 的最佳实践。这个应用程序包括两个组件,一个显示计数器的值(COUNTER),另一个显示计数器的历史记录(HISTORY)。

components/Counter.js

这个组件显示计数器的值,包括使用自定义 Hook 钩子获取状态,以及使用 useDispatch 和 bindActionCreators 分发 Action。

------ ----- ---- -------
------ - ----- ----- ---------------- - ---- --------------
------ - ------------ ----------- - ---- -------------
------ - ------------------ - ---- -------
------ - ---------- --------- - ---- --------------------

------ ------- -------- --------- -
  ----- ----- - ----------------- -- ------------
  ----- -------- - -------------

  ----- ------- - -------------------- ---------- --------- -- ---------

  ------ -
    ------
      ----- -------- --------- --- ----------- ------- ---------- -------- ----------- --------------
      ----- -------- -------------- ------ --------------- -------------- ---
        ----------------- ----------- -- ---------------------
          ----- -------- --------- --- ----------- ------- ------ ----- -------------------
        -------------------
        ----------------- ----------- -- ---------------------
          ----- -------- --------- --- ----------- ------- ------ ------- -------------------
        -------------------
      -------
    -------
  -
-

components/History.js

这个组件显示计数器的历史记录,包括使用自定义 Hook 钩子获取历史记录,以及使用 useDispatch 分发更改当前历史记录的 Action。

------ ----- ---- -------
------ - ----- ----- ---------------- - ---- --------------
------ - ------------ ----------- - ---- -------------
------ - ------------ - ---- --------------------

------ ------- -------- --------- -
  ----- ------- - ----------------- -- --------------
  ----- -------- - -------------

  ------ -
    ------
      ----- -------- --------- --- ----------- ------- ---------- -------- ------------------
      ------------------- ------ -- -
        ----- ----------- -------- --------- -- ----------------
      ---
      --------------- - - -- -
        ----------------- ----------- -- --------------------------
          ----- -------- --------- --- ----------- ------- ------ ------ ---------- -------- -------- --------------
        -------------------
      --
    -------
  -
-

actions/counter.js

这个文件包含了计数器的 Action 定义,包括增加和减少计数器的完整 Action。

------ ----- --------- - -- -- -
  ------ -
    ----- -----------
  -
-

------ ----- --------- - -- -- -
  ------ -
    ----- -----------
  -
-

actions/history.js

这个文件包含了历史记录的 Action 定义,包括添加和清空历史记录的完整 Action。

------ ----- ---------- - ------- -- -
  ------ -
    ----- --------------
    -------- -----
  -
-

------ ----- ------------ - -- -- -
  ------ -
    ----- ---------------
  -
-

reducers/index.js

这个文件包含了多个 Reducer 的组合定义,包括计数器和历史记录的 Reducer。

------ - --------------- - ---- -------

----- ------------ - ------ - -- ------- -- -
  ------ ------------- -
    ---- ------------
      ------ ----- - -
    ---- ------------
      ------ ----- - -
    --------
      ------ -----
  -
-

----- -------------- - ------ - --- ------- -- -
  ------ ------------- -
    ---- --------------
      ------ ---------- ---------------
    ---- ----------------
      ------ --
    --------
      ------ -----
  -
-

------ ------- -----------------
  ------ -------------
  -------- --------------
--

App.js

最后,这个文件包含主要的应用程序逻辑,包括显示 Counter 组件和 History 组件,并在 Counter 组件中更新和添加历史记录。

------ ----- ---- -------
------ - ---- - ---- --------------
------ ------- ---- ----------------------
------ ------- ---- ----------------------
------ - -------- - ---- -------------
------ ----- ---- ---------

------ ------- -------- ----- -
  ----- ------------ - ------- -- -
    ---------------- ----- -------------- -------- ------ ------- -- --------- --
  -

  ------ -
    --------- --------------
      ----- -------- ----- -- --------------- --------- ----------- -------- ---
        -------- ----------------------- --
        -------- --
      -------
    -----------
  -
-

结论

本文介绍了在 React Native 中使用 Redux 的最佳实践,包括了基本概念,初始化和配置以及示例代码。这些实践可以帮助开发者更好地管理应用程序的状态和数据流,提高应用程序的可维护性、可扩展性和可测试性。通过熟悉和运用这些实践,开发者可以更加高效地开发和维护 React Native 应用程序,提供更好的用户体验和功能。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67224a312e7021665e0b25b5