React Native 是一种流行的开源框架，允许开发人员使用 JavaScript 和 React 构建跨平台的原生应用程序。Redux-Thunk 是一个流行的 Redux 中间件，用于处理异步操作。在本文中，我们将探讨如何在 React Native 应用中使用 Redux-Thunk。
Redux-Thunk 简介
Redux-Thunk 是一个 Redux 中间件，允许我们编写具有副作用的操作（例如异步操作）。它允许我们将函数作为 action 创建器传递给 store.dispatch()，而不是仅仅传递一个简单的对象。这些函数可以调用异步操作，例如 API 调用或延迟操作，并在完成后分派 action。
安装 Redux-Thunk
首先，我们需要安装 Redux-Thunk。可以使用以下命令：
npm install redux-thunk --save
配置 Redux-Thunk
要使用 Redux-Thunk，我们需要将其作为 Redux createStore() 函数的第二个参数传递。以下是一个示例 createStore() 函数：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));在上面的示例中，我们将 rootReducer 作为第一个参数传递给 createStore() 函数，将 applyMiddleware() 函数与 Redux-Thunk 作为第二个参数传递。
编写 Redux-Thunk Action
现在我们已经安装和配置了 Redux-Thunk，我们可以开始编写 Redux-Thunk action。以下是一个示例 action，它从 API 获取数据并将其存储在 Redux store 中：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- --------- - -- -- -
------ ---------- -- -
-----------------------------
-------------------------------------------------------
-------------- -- -
----- ---- - --------------
---------------------------------
--
------------ -- -
----- ------------ - --------------
-----------------------------------------
---
--
--
------ ----- ---------------- - -- -- -
------ -
----- --------------------
--
--
------ ----- ---------------- - ------ -- -
------ -
----- ---------------------
-------- ----
--
--
------ ----- ---------------- - ------- -- -
------ -
----- ---------------------
-------- -----
--
--在上面的示例中，我们定义了一个名为 fetchData 的 action 创建器函数，它返回一个函数。这个函数接受一个 dispatch 参数，它可以分派多个 action。我们首先分派一个 fetchDataRequest() action，表示我们正在获取数据。然后，我们使用 axios 发出 GET 请求，并在成功时分派 fetchDataSuccess() action，在失败时分派 fetchDataFailure() action。
在组件中使用 Redux-Thunk Action
现在，我们已经编写了一个 Redux-Thunk action，我们可以在组件中使用它。以下是一个示例组件，它使用 fetchData() action 获取数据并将其渲染到屏幕上：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- -------------
----- --- - -- -- -
----- -------- - --------------
----- ---- - ----------------- -- ------------
----- ------- - ----------------- -- ---------------
----- ----- - ----------------- -- -------------
------------ -- -
----------------------
-- ----
-- --------- -
------ -
------
-----------------------
-------
--
-
-- ------- -
------ -
------
------------ --------------
-------
--
-
------ -
------
-------------- -- -
----- ---------------------------------
---
-------
--
--
------ ------- ----在上面的示例中，我们使用 useDispatch() hook 获取 dispatch 函数，然后使用 useSelector() hook 获取从 Redux store 中选择的数据、加载状态和错误状态。在 useEffect() hook 中，我们调用 fetchData() action 获取数据。
如果数据正在加载，我们将渲染一个“Loading”文本。如果发生错误，我们将渲染一个错误消息。否则，我们将渲染数据列表。
结论
在本文中，我们探讨了如何在 React Native 应用中使用 Redux-Thunk。我们安装和配置了 Redux-Thunk，然后编写了一个 Redux-Thunk action，最后在组件中使用它。使用 Redux-Thunk，我们可以轻松处理异步操作，并将其集成到 Redux 中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6765012476af2b9a20e6edc5