Redux 与 React Native 你需要知道的所有内容

阅读时长 6 分钟读完

前言

Redux 是 JavaScript 状态管理库,而 React Native 是构建原生应用的框架。它们都能够让开发者开发出更强大、更灵活的应用。本文将会深入探讨 Redux 与 React Native 的关系以及如何实现一个具有良好体验的 React Native 应用程序。

Redux 是什么?

Redux 是一个 JavaScript 状态容器,提供了强大的可预测性和可扩展性,以及一组约束性的唯一方式来管理应用程序中的状态(state)。Redux 基于三个基本原则构建:

  • 单一数据源:整个应用程序的 state 只能存储在一个对象树中
  • State 是只读的: 不能直接修改 state ,而是通过派生新的 state 来重新渲染界面。
  • 使用纯函数来执行修改: 通常被称为"reducer",必须是一个纯函数,它接受先前的 state 和 action,返回下一个状态。

React Native 是什么?

React Native 是一种构建原生应用程序的框架,它允许开发人员使用 JavaScript 和 React 以及原生组件构建 Android 和 iOS 应用程序。React Native 构建原生应用程序的方式是使用 JavaScript 来描述界面的层次结构,并将其转换为原生平台上的相应的组件和 es5 或 es6 语法。

Redux 在 React Native 中的应用

React Native 是通过组件来构建应用程序的,当组件之间相互作用时,可能会涉及到组件之间的状态共享、状态传递等问题。 这些问题可以通过 Redux 应用来解决,Redux 可以提供一个公共的数据层,使得所有组件共享一个数据源,管理应用程序的状态。

安装 Redux

首先,让我们安装 Redux,并在项目中引入它。

创建 Action

Action 是描述状态变化的对象。

使用 Redux ,您必须遵守约定的模式来传递数据,我们将数据传递到 Store ,然后使用 Store 中的数据更新组件某些部分。

Action 应该是一个对象,它必须有一个类型(type),它定义了如何修改状态(state)。通常,它还包含有关数据的一些信息。

例如:

创建 Reducer

Reducer 会接收当前状态和 action ,并返回一个新的状态(state)。 它通常是一个纯函数(pure function),接受前一个状态和一个 action,返回新的状态。

例如:

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

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

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

创建 Store

Store 保存了整个应用程序的状态(state)。创建 Store 可以使用 createStore() 方法,并将 Reducer 传递给它。

例如:

容器组件和展示组件

我们可以定义两种组件类型来实现组件之间的状态的共享和传递。

容器是一个连接到 Store 的组件,它会将用于创建 Store 的数据传递到所有展示组件中,容器是纯 JavaScript 对象,并通过 connect() 方法将 Store 中的组件数据传递到所有展示组件。

展示(也称为演示)组件只负责在页面上呈现组件内容,它们从容器组件中获取数据,并通过 props 对象传递到展示组件中。

例如:

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

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

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

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

使用 Action 和 Reducer

现在,我们可以将 Action 和 Reducer 用于 React Native。

例如:

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

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

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

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

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

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

结论

Redux 和 React Native 是一对完美的组合,Redux 为 React Native 应用程序提供了在组件之间共享状态和数据的一种标准方式。希望本篇文章能够帮助您学习、了解 Redux 在 React Native 中的应用,并在您的项目中实现它。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6747cef05883fc5ebfe3c4b4

纠错
反馈