了解 React Redux 和 React Native Elements

介绍

在 React Native 应用开发中，常常会出现以下需求：

• 管理在多个组件中使用的全局数据。
• 拥有整洁、一致且快速构建的界面布局。

为此，两个常用的库是 React Redux 和 React Native Elements。本章节将介绍这两个库的基本概念以及实现示例。

React Redux

React Redux 是用于在 React 和 React Native 应用中管理全局 state 的库。Redux 帮助组织许多组件需要的数据，而无需通过层层传递 props。

Redux 中最重要的概念

• Store – 用来存放整个应用全局 state 的地方。整个应用只有一个主 store。

• Action – 一个 JavaScript 对象，用来告诉 Redux 想要执行哪种类型的更改。Action 包含 type 属性，还可以包含 payload。

  { "type": "ADD_ITEM", "payload": "Apel" }

• Reducer – 根据 action 决定 state 如何变化的函数。Reducer 必须是 pure function。

  function cartReducer(state = [], action) {
    switch (action.type) {
      case "ADD_ITEM":
        return [...state, action.payload];
      default:
        return state;
    }
  }

• dispatch – 用来向 store 发送 action 的函数。

  dispatch({ type: "ADD_ITEM", payload: "Apel" });

• useSelector – 用来从 store 中读取数据的 Hook。

  const items = useSelector(state => state.cart);

Redux 在组件众多且需要在整个应用中保持数据一致性的场景中非常有用。

React Native Elements

React Native Elements 是一个 UI 库，提供了大量开箱即用的 React Native 组件。

主要优势

• 提供了诸如 Button、Card、Input、Icon、Header、Avatar、ListItem 等众多组件。
• 所有组件都有默认样式，使界面更加统一、专业，无需从头编写样式。
• 虽然自带样式，但每个组件仍然可以通过 props、style 和 theme 进行自定义。

简单示例

import { Button } from "@rneui/themed";

React Native Elements 能节省开发时间，让界面更现代，而不需要大量手动样式。

在 React Native 中集成 React Redux

安装

npm install @reduxjs/toolkit react-redux

建议使用 Redux Toolkit，因为它能让代码结构更简洁。

创建 Store（例如 redux/store.js）

import { configureStore } from "@reduxjs/toolkit";
import cartReducer from "./cartSlice";

export const store = configureStore({
  reducer: {
    cart: cartReducer
  }
});

在 App.js 中添加 Provider

import { Provider } from "react-redux";
import { store } from "./redux/store";

export default function App() {
  return (
    <Provider store={store}>
      {/* 其他应用组件 */}
    </Provider>
  );
}

Provider 确保应用中的所有组件都能访问 Redux state。

读取 State

import { useSelector } from "react-redux";

const items = useSelector((state) => state.cart.items);

修改 State

import { useDispatch } from "react-redux";
import { addItem } from "../redux/cartSlice";

const dispatch = useDispatch();
dispatch(addItem("Jeruk"));

通过这种集成，React Redux 让全局 state 更加稳定、易于管理。

在应用中使用 React Native Elements 的示例

安装

npm install @rneui/themed @rneui/base

ProductCard.jsx

import { Card, Button, Text } from "@rneui/themed";

export default function ProductCard({ nama, harga }) {
  return (
    <Card>
      <Card.Title>{nama}</Card.Title>
      <Text>Harga: Rp {harga.toLocaleString()}</Text>
      <Button title="Beli" />
    </Card>
  );
}

Home.jsx

import { View } from "react-native";
import ProductCard from "./ProductCard";

export default function Home() {
  return (
    <View>
      <ProductCard nama="Produk A" harga={15000} />
      <ProductCard nama="Produk B" harga={25000} />
    </View>
  );
}

使用 React Native Elements，界面即使代码中几乎没有样式也能保持整洁。

结论

在 React Native 开发中，掌握全局 state 管理和构建一致 UI 的方法非常关键。React Redux 解决了复杂 state 的问题，而 React Native Elements 加速了界面搭建。熟练掌握这两者，学生们就能打造更稳定、结构化且专业的应用。