前言
React Native 是 Facebook 推出的一款跨平台移动应用开发框架，使得开发者能够基于 React 语法编写原生应用的 UI 组件。Redux 是一个流行的 JavaScript 应用程序状态管理工具，它通过单一的“store”(仓库) 来异步处理应用中的状态变化。本文将介绍在 React Native 中使用 Redux 的最佳实践，旨在帮助开发者更好地管理应用程序的状态和数据流，提高应用程序的可维护性、可扩展性和可测试性。
基本概念
在 React Native 中使用 Redux，需要掌握以下几个基本概念：
Action
Action 是一个带有 type 属性的普通对象，用于描述应用中发生的事件。例如，处理一个按钮点击事件可能会触发以下 Action：
{
type: 'BUTTON_CLICK',
payload: { value: true }
}Reducer
Reducer 是一种纯函数，它接收当前状态和一个 Action，返回新的状态。Redux 仓库需要至少一个 Reducer 函数来管理状态。例如，以下 Reducer 函数处理一个名为“BUTTON_CLICK”的 Action：
function reducer(state = {}, action) {
switch (action.type) {
case 'BUTTON_CLICK':
return Object.assign({}, state, action.payload)
default:
return state
}
}Store
Store 是应用程序状态的唯一来源。每个应用程序只能有一个仓库，它是由一个 Reducer 函数创建的。仓库包含所有应用程序的状态，以及一些辅助函数，比如 dispatch 和 subscribe。
Middleware
Middleware 是一种函数，它可以扩展 Redux 的行为。它位于 Action 和 Reducer 之间，可以拦截、修改或异步处理 Action。例如，以下 Middleware 函数记录每个 Action 和状态变化的时间戳：
const logger = store => next => action => {
console.group(action.type)
console.info('dispatching', action)
const result = next(action)
console.log('next state', store.getState())
console.groupEnd(action.type)
return result
}安装和配置
要在 React Native 中使用 Redux，需要首先安装以下依赖：
npm install redux react-redux redux-thunk --save
redux 和 react-redux 是 Redux 库和 React Hooks 的绑定，它们不需要额外配置和安装，但是 redux-thunk 是用于处理异步 Action 的常见 Redux Middleware。
接下来，需要创建一个名为“store.js”的文件，并在其中构建 Redux 仓库：
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'
const middleware = applyMiddleware(thunk)
export default createStore(rootReducer, middleware)其中，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