Redux 是一个 JavaScript 应用程序状态管理库，被广泛用于 React 和 React Native 应用中。它通过提供单一的状态树来实现应用程序状态的一致性和可预测性，而且易于测试和调试。
在 React Native 应用中使用 Redux 可以让你更好的处理应用程序状态，让你的应用程序变得更加可维护和可扩展。本文中，我们将介绍如何在 React Native 中使用 Redux。
需要准备的工具
在开始本文之前，请确保你已经安装了以下工具：
步骤
步骤一：创建 React Native 应用
在终端中执行以下命令：
npx react-native init MyReduxApp
这个命令将创建一个名为“MyReduxApp”的 React Native 应用程序。完成之后，进入项目目录并运行应用程序：
cd MyReduxApp npx react-native run-ios # 运行 iOS 应用程序 npx react-native run-android # 运行 Android 应用程序
步骤二：创建 Redux Store
在此步骤中，我们将创建 Redux store，这是应用程序状态的唯一来源。
首先，安装必要的依赖：
npm install redux react-redux --save
然后，在项目目录中创建一个名为“store.js”的文件，并添加以下代码：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - -------- - ---- -------------- ----- ------------ - --- -- -------- ----- ---------- - ------ - ------------- ------- -- - ------ ------------- - -------- ------ ------ - -- ----- ----- - ------------------------ ------ ------- ------展开代码
在此代码中，我们使用“createStore”函数创建 Redux store，并将其导出。请注意，此时我们还没有添加任何 reducer 函数，因此应用程序状态将始终为空。在本例中，我们只是返回了初始状态。
步骤三：创建 Reducer
在此步骤中，我们将创建一个 reducer 函数，用于处理应用程序状态的变化。在本例中，我们将创建一个名为“userReducer”的 reducer，用于处理用户相关的状态。
在项目目录中创建一个名为“reducers.js”的文件，并添加以下代码：
-- -------------------- ---- ------- ------ ----- ----------- - ------ - --- ------- -- - ------ ------------- - ---- --------------- ------ - --------- --------- -------------- -- ---- ------------ ------ - --------- ------ -------------- -- -------- ------ ------ - --展开代码
在上述代码中，我们创建了一个名为“userReducer”的 reducer 函数。当触发“SET_USERNAME”或“SET_EMAIL”操作时，我们将返回一个具有更新值的新状态。请注意，我们在上面的代码中使用了展开运算符“...”，这可以帮助我们创建一个新副本对象。
步骤四：将 Redux Store 集成到应用程序中
在此步骤中，我们将集成 Redux store 到 React Native 应用程序中。
首先，在“App.js”文件的顶部添加以下代码：
import { Provider } from 'react-redux'; import store from './store';
接下来，将应用程序包装在“Provider”组件中，并将(store)作为属性传递：
return ( <Provider store={store}> <View style={styles.container}> // 应用程序代码 </View> </Provider> );
这样就可以在项目中使用 Redux 了。
步骤五：使用 Redux
在我们的应用程序中，我们的目标是将用户的用户名和电子邮件存储在 Redux store 中。以下是一个简单的示例。
首先，在我们的提交数据时，我们将调用一个“setUsername”函数：
const setUsername = (username) => { return { type: 'SET_USERNAME', payload: username, }; };
我们创建了一个 type 为“SET_USERNAME”的 Action，并且设置了 payload 为用户名。
接下来，在我们要使用用户名时，我们可以从 Redux store 中获取用户名：
import { useSelector } from 'react-redux'; const username = useSelector((state) => state.user.username);
在此代码中，我们使用“useSelector”钩子函数从 Redux store 获取用户名。
总结
本文中，我们介绍了如何在 React Native 应用中使用 Redux。通过创建 Redux store 和 reducer，我们可以更好地处理应用程序状态。
如果你想深入了解，请在 Redux 官方文档中了解更多关于 Redux 的内容。如果需要更多的指导，请参考我在本文中提供的代码示例。
希望你通过阅读这篇文章对 Redux 的使用有了更好的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64734776968c7c53b00c1acd
