简介
在前端开发中，使用 React Native 开发应用时，我们需要使用 Redux 作为状态管理工具。Redux 提供了一种将组件解耦合并的方式，但是存在一个问题：组件如何等待某个特定的 action？这时候，就需要使用 redux-wait-for-action-rn 这个 npm 包。该包提供了一个简单的方法来等待某个特定的 action，并且在 action 触发时重新渲染组件。
安装
npm i redux-wait-for-action-rn --save
使用方法
首先，创建一个 action，例如
export const FETCH_DATA = "FETCH_DATA";
export function fetchData() {
return {
type: FETCH_DATA,
};
}然后在组件中使用 Redux 的 connect 方法将其连接到 store，例如
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- ----------- ------- --------------- -
------------------- -
-----------------------
-
-------- -
------ -------------- ---------------
-
-
----- --------------- - ------- -- -
------ ---
--
----- ------------------ - -
----------
--
------ ------- ------------------------ ---------------------------------现在我们需要等待 FETCH_DATA 这个 action 完成后再重新渲染组件。使用 redux-wait-for-action-rn，只需要在 mapDispatchToProps 中将 actions 传入 withWaitForAction：
-- -------------------- ---- -------
------ - ----------------- - ---- ---------------------------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- ----------- ------- --------------- -
------------------- -
-----------------------
-
-------- -
------ -------------- ---------------
-
-
----- --------------- - ------- -- -
------ ---
--
----- ------------------ - ---------- -- -
------ ------------------
-
----------
--
--------------
------------
--
------ ------- ------------------------ ---------------------------------这个时候，组件会等待 FETCH_DATA 这个 action 完成后再次渲染。在 above 方式，我们将所有需要等待的 actions 的 action type 放入数组中即可。
示例代码
-- -------------------- ---- -------
-- ----------
------ ----- ---------- - -------------
------ -------- ----------- -
------ -
----- -----------
--
-
------ ----- ------------------ - ---------------------
------ -------- ---------------------- -
------ -
----- -------------------
-----
--
-
-- -------------------------
------ - ----------------- - ---- ---------------------------
------ - ------- - ---- --------------
------ - ---------- ---------------- - ---- -------------
----- ----------- ------- --------------- -
------------------- -
-----------------------
-
-------- -
------ -------------- ---------------
-
-
----- --------------- - ------- -- -
------ ---
--
----- ------------------ - ---------- -- -
------ ------------------
-
----------
-----------------
--
--------------------
------------
--
------ ------- ------------------------ ---------------------------------结论
在 React Native 应用中，我们经常需要等待某些特定的 action 完成后再重新渲染组件。redux-wait-for-action-rn 包提供了一种简单的方法来解决这个问题，同时保持组件代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730681e8991b448e92f4