在移动应用开发中，React Native 是一个流行的跨平台开发框架，它允许我们使用 JavaScript 和 React 的方式来构建原生应用。Redux 是一个可预测的状态容器，它帮助我们管理 React Native 应用的状态和数据流。
本文将介绍如何使用 react-native-whcapp 和 Redux 来创建跨平台的 React Native 应用。我们将通过实例来演示如何结合 Redux 运行 iOS 和 Android 应用。
安装 react-native-whcapp 和 Redux
首先，我们需要安装 react-native-whcapp 和 Redux。
npm install react-native-whcapp --save npm install redux --save
集成 Redux Store
接下来，我们需要在我们的应用程序中创建一个 Redux store。这个 store 会存储我们应用中所有的 state，并且负责更新这些状态。我们可以在 index.js 文件中创建 Redux store。我们还需要导入 applyMiddleware 和 thunkMiddleware 来支持异步操作：
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunkMiddleware));在上面的代码中，我们使用了 rootReducer，这是一个包含所有 Reducer 的对象。我们还使用了 applyMiddleware 和 thunkMiddleware，这使我们能够发送异步 action。
创建 Reducers
接下来，我们需要创建 reducers。Reducers 是纯函数，它们会根据 actions 更新应用的状态。
我们可以创建一个名为 appReducers.js 的文件来存放所有 reducer：
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ - ----------------- - ---- -------------------
------ - ------------ - ---- -----------------------------
----- ----------- - ------------------------------------------------------
----- ------------ - ---------------------------------------------------
----- ------------ - -------------------------------------------------------
----- --------------- - --------------------------------------
-------------
------------
--
-------- --------- - ---------------- ------- -
--- ----------
------ ------------- -
---- --------
--------- - --------------------------------------
---------------------------- ---------- ------ ---
-----
--
------
---- ---------
--------- - --------------------------------------
---------------------------- ---------- ------- ---
-----
--
------
--------
--------- - --------------------------------------------- -------
------
-
------ --------- -- ------
-
-------- ----------- - --- ------- -
------ ------------- -
---- -----------
------ -
---------
-
--- ----------
----- ------------
--
--
--------
------ ------
-
-
----- ----------- - -----------------
----
------
---
------ ------- ------------在上面的代码中，我们定义了两个 reducers：nav 和 todos。nav 用于处理导航相关的逻辑，todos 用于处理 todo list 相关的逻辑。
创建 Actions
接下来，我们需要创建 actions。Actions 是一个对象，它会描述发生的事件类型和相应的数据。我们可以通过调用 dispatch 方法来触发一个 action。
我们可以在 actions.js 文件中创建所有的 actions：
-- -------------------- ---- -------
-------- ------------- -
------ -
----- -----------
--- ----------------------------------------
-----
--
-
------ - ------- --在上面的代码中，我们定义了一个 addTodo action。它包含一个由随机数生成的 id 和一个文本字符串。当我们在组件中调用 dispatch(addTodo('new todo')) 时，就会触发这个 action。
使用 Connect 函数
最后，我们需要使用 connect 函数来连接 React 组件和 Redux store。这样就能实现将 state 和 action 传递给组件，从而使得组件能够访问到 store。
我们可以在 App.js 中使用 connect 函数：
import { connect }
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/6343) ，转载请注明来源
[https://www.javascriptcn.com/post/6343](https://www.javascriptcn.com/post/6343)