React Native 是 Facebook 推出的跨平台移动应用开发框架，可以同时支持 iOS 和 Android 平台的开发。Redux 则是一个 JavaScript 状态管理工具，可以帮助我们方便地管理应用的状态。在 React Native 的开发中，Redux 的应用已经变得越来越普遍。
本文将介绍作者最近开发的一个 React Native Redux 实战项目的总结，同时深入分析该项目的工程代码。希望本文能够帮助读者更深入地学习 React Native 和 Redux 的实际应用。
项目概述
本项目是一款移动电商应用，主要包含以下几个功能：
- 用户注册/登录
- 商品列表展示
- 商品搜索
- 加入购物车/购物车管理
- 提交订单/订单管理
- 用户个人中心
项目涉及前后端交互，需要使用 Restful API 进行数据传输，其中前端采用 React Native + Redux 实现。
具体开发环境和使用的工具如下：
- React Native v0.64.0
- React Navigation v5.9.4
- Redux v4.0.5
- axios v0.21.1
- ESLint v7.32.0
- Prettier v2.4.1
技术要点
Redux 中间件
在本项目中，作者使用了 Redux 的中间件来处理异步请求。具体来说，作者使用 redux-thunk 来实现 action 的异步调用。下面是一个典型的使用 redux-thunk 的 Redux action：
// javascriptcn.com 代码示例
export const fetchProductList = (searchText = '') => async (dispatch) => {
try {
dispatch(fetchProductListPending());
const response = await api.get('/products', { params: { search_text: searchText } });
dispatch(fetchProductListSuccess(response.data));
} catch (error) {
dispatch(fetchProductListError(error.message));
}
};可以看到，上述代码定义的 fetchProductList 函数返回的是一个异步函数。通过 await 关键字，我们能够在异步请求返回之后再更新 Redux 中的 store。这种方式能够让我们更方便地管理异步请求的状态。
Redux Persist
Redux Persist 是一个可以帮助我们快速存储和加载 Redux store 的库。在本项目中，作者使用了 Redux Persist 来存储用户的登录状态以及购物车状态。以下是一个典型的使用 Redux Persist 的 Redux store 配置：
// javascriptcn.com 代码示例
const persistConfig = {
key: 'root',
storage: AsyncStorage,
whitelist: ['auth', 'cart'],
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer, applyMiddleware(...middlewares));
let persistor = persistStore(store);
export { store, persistor };可以看到，我们只需通过 persistReducer 函数将原来的 reducer 包装一下即可实现 store 的持久化。
React Navigation
React Navigation 是 React Native 中常用的导航库，它能够帮助我们方便地实现页面跳转等导航功能。在本项目中，作者使用了 React Navigation 来实现各个页面之间的跳转。以下是一个典型的使用 React Navigation 的导航器配置：
// javascriptcn.com 代码示例
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Home' }}
/>
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}以上代码配置了一个 Stack Navigator，其中包含了两个页面：HomeScreen 和 DetailsScreen。我们可以通过不同的 options 属性来对页面进行定制化，比如修改页面标题等。
Eslint + Prettier
在本项目中，作者使用了 Eslint 和 Prettier 来规范代码风格。具体来说，作者使用了 eslint-config-airbnb，它是 Airbnb 公司开发的一套 Eslint 规则集，可以帮助我们规范化代码。同时，作者还使用了 prettier 来实现代码自动格式化，以提高代码的可读性和可维护性。以下是一个示例配置：
{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"rules": {
...
}
}通过以上配置，我们可以同时使用 Airbnb 的规则和 Prettier 的自动格式化功能。
工程代码分析
在上一节中，我们已经介绍了一些本项目中用到的技术要点。接下来，我们将通过具体代码分析来深入学习这些技术。
1. 数据层
数据层主要包括 Redux 相关代码，以及我们的 Restful API 请求代码。本节中我们着重介绍 Redux 相关的代码。
1.1. Reducer
本项目中包含多个 reducer，每个 reducer 主要负责处理一个功能模块的状态。以下是 Auth reducer 的示例代码：
// javascriptcn.com 代码示例
const initialState = {
isFetching: false,
isAuthenticated: false,
user: null,
errorMessage: null,
};
const authReducer = (state = initialState, action) => {
switch (action.type) {
case LOGIN_PENDING:
return { ...state, isFetching: true };
case LOGIN_SUCCESS:
return { ...state, isFetching: false, isAuthenticated: true, user: action.payload };
case LOGIN_ERROR:
return { ...state, isFetching: false, isAuthenticated: false, errorMessage: action.payload };
default:
return state;
}
};我们首先定义该 reducer 的初始状态，然后在 switch 语句中根据不同的 action 类型进行处理。每次 reducer 的操作都会返回一个新的 state。
1.2. Selectors
在 Redux 中，selector 是一个重要的概念。selector 是一个返回 store 中某一部分状态的函数，它能够让我们方便地获取特定的状态，以便在组件中使用。以下是一个典型的 selector 来获取购物车状态：
export const getCartItems = (state) => state.cart.items;
1.3. Actions
Actions 是定义在 Redux 中的行为，每个 action 包含一个 type 字段和其他相关字段。以下是一个典型的 action：
export const loginSuccess = (user) => ({
type: LOGIN_SUCCESS,
payload: user,
});我们可以通过使用 Reducer 和 Actions 来实现 Redux 中的状态管理。而使用 Selectors 则可以让我们更方便地获取 state 中的某一部分数据。
2. 视图层
在 React Native 中，视图层代码通常使用 JSX 语法进行编写。本节中我们将介绍一些典型的视图层代码，如登录页面、购物车页面等。
2.1. 登录页面
在本项目中，登录页面包含用户输入用户名和密码的表单和登录按钮。在用户点击登录按钮之后，我们将触发 Redux 中 Auth 模块的登录功能。
以下是一个典型的登录页面的 JSX 代码：
// javascriptcn.com 代码示例
export default function LoginPage() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const dispatch = useDispatch();
const handleLogin = () => {
dispatch(login(username, password));
};
return (
<View style={styles.container}>
<TextInput
style={styles.input}
onChangeText={setUsername}
value={username}
placeholder="Username"
/>
<TextInput
style={styles.input}
onChangeText={setPassword}
value={password}
placeholder="Password"
secureTextEntry
/>
<Button title="Login" onPress={handleLogin} />
</View>
);
}可以看到，我们使用了 useState 来记录用户输入的用户名和密码。而在用户点击登录按钮之后，我们使用 useDispatch hooks 来触发 Redux 的 login action。
2.2. 购物车页面
在购物车页面中，用户可以查看已加入购物车的商品列表，并对其进行删除和修改等操作。以下是一个典型的购物车页面的 JSX 代码：
// javascriptcn.com 代码示例
export default function CartPage() {
const cartItems = useSelector(getCartItems);
const dispatch = useDispatch();
const handleItemDelete = (itemId) => {
dispatch(removeCartItem(itemId));
};
const handleItemCountChange = (item, count) => {
dispatch(updateCartItem(item, count));
};
const totalPrice = cartItems.reduce((total, item) => total + item.price * item.count, 0);
return (
<View style={styles.container}>
<FlatList
data={cartItems}
renderItem={({ item }) => (
<CartItem
item={item}
onDelete={() => handleItemDelete(item.id)}
onCountChange={(count) => handleItemCountChange(item, count)}
/>
)}
keyExtractor={(item) => item.id.toString()}
/>
<Text style={styles.totalPriceText}>Total Price: ${totalPrice}</Text>
<Button title="Checkout" disabled={cartItems.length === 0} />
</View>
);
}我们使用 useSelector hooks 来获取 Redux 中 cart 模块的状态，可以直接获取存储在 selector 中的数据。同时，在用户对购物车项进行修改和删除的操作后，我们将触发对应的 action 来更新 Redux 中的状态。
总结
本文介绍了一个 React Native Redux 实战项目的总结以及工程代码分析。我们讨论了一些技术要点，比如 Redux 中间件、Redux Persist、React Navigation 等，同时通过具体的代码实例，让读者更好地理解 React Native 和 Redux 的实际应用。我们希望读者能够通过本文的介绍，更深入地学习 React Native 和 Redux，提升自己的开发能力。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65371e5e7d4982a6ebf76dec