React Native面试题——Redux之常见面试题(1)

发表于 2025-04-12 分类于面试相关， React Native面试题阅读时长 ≈ 3 分钟

一概述

Redux 是什么？为什么在 React Native 中使用 Redux？
Redux 的核心原理有哪些？
Redux 的工作流程是怎样的？
你在 React Native 项目中是如何组织 Redux 结构的？
什么是中间件（Middleware）？Redux 中有哪些常用中间件？
redux-thunk 是什么？它是如何工作的？
Redux 和 React 的 Context 有什么区别？
在 React Native 中如何将组件连接到 Redux？
如何在 Redux 中实现模块拆分？（Redux 模块化管理）
Redux 持久化（redux-persist）是如何实现的？

二面试题解答(仅供参考)

2.1 Redux 是什么？为什么在 React Native 中使用 Redux？

Redux 是一个 JavaScript 应用状态管理库，
使用单一状态树（Single Source of Truth）来统一管理应用状态。
Redux 主要包含 3 个核心概念：State、Action、Reducer。

在 React Native 中使用 Redux 的原因：
-组件状态难以跨多个组件共享或传递时，Redux 提供集中式管理；
-提高组件之间通信的效率；
-提高调试能力（如 Redux DevTools）；
-状态可预测，易于测试和维护。

2.2 Redux 的核心原理有哪些？

Redux 的核心原理包括：
-单一状态树：整个应用的状态被保存在一个对象树中；
-状态是只读的：唯一改变状态的方法是触发 Action；
-使用纯函数来更新状态：Reducer 是纯函数，接收旧的 state 和 action，返回新的 state。

2.3 Redux 的工作流程是怎样的？

1.组件调用 dispatch(action) 发送一个 Action；
2.Redux 调用对应的 Reducer；
3.Reducer 根据 Action 的类型和 payload 返回新的 state；
4.Redux 将新的 state 更新到 Store 中；
5.组件重新渲染

2.4 你在 React Native 项目中是如何组织 Redux 结构的？

典型的 Redux 项目结构如下：

/src
 ├── /redux
 │    ├── actions/
 │    ├── reducers/
 │    ├── store.js
 │    └── types.js

说明：
-actions/：定义所有的 action 创建函数；
-reducers/：包含多个 reducer 和合并后的 rootReducer；
-store.js：创建和配置 store；
-types.js：定义 action 的类型常量，避免硬编码。

2.5 什么是中间件（Middleware）？Redux 中有哪些常用中间件？

Middleware是Redux的中间处理层，它在Action被发送和到达Reducer之间拦截、处理 Action。

常用中间件：
-redux-thunk：允许 dispatch 函数里执行异步逻辑；
-redux-saga：基于 generator 的异步处理方案；
-redux-logger：用于打印每次的 action 和 state，便于调试。

2.6 redux-thunk 是什么？它是如何工作的？

redux-thunk 是 Redux 的中间件，
它允许我们 dispatch 函数（Thunk）而不是普通的 action 对象，从而实现异步操作。

// 示例
export const fetchData = () => {
  return async (dispatch) => {
    dispatch({ type: "FETCH_START" });
    try {
      const res = await fetch("https://api.example.com/data");
      const data = await res.json();
      dispatch({ type: "FETCH_SUCCESS", payload: data });
    } catch (error) {
      dispatch({ type: "FETCH_ERROR", payload: error });
    }
  };
};

2.7 Redux 和 React 的 Context 有什么区别？

项目	Redux	React Context
使用场景	大型应用，复杂状态共享	简单状态共享（如主题/语言）
状态更新机制	基于 reducer 和 action	基于 useContext`和`useState
中间件支持	支持（如 thunk、saga）	无内建中间件机制
性能优化	更易控制更新粒度	多个组件使用会引起不必要重渲染

2.8 在 React Native 中如何将组件连接到 Redux？

使用 react-redux 提供的 connect() 或 useSelector 和 useDispatch：


// 使用 hooks
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  const count = useSelector(state => state.counter.count);
  const dispatch = useDispatch();

  return (
    <Button onPress={() => dispatch({ type: 'INCREMENT' })} 
    title={`Count: ${count}`} />
  );
};

2.9 如何在 Redux 中实现模块拆分？（Redux 模块化管理）

使用 combineReducers 将不同模块拆分，每个模块管理独立的 state：

// reducers/index.js
import { combineReducers } from 'redux';
import authReducer from './authReducer';
import userReducer from './userReducer';

const rootReducer = combineReducers({
  auth: authReducer,
  user: userReducer,
});

export default rootReducer;

2.10 Redux 持久化（redux-persist）是如何实现的？

使用 redux-persist 可将 Redux 的 state 持久化到本地（如 AsyncStorage）：


import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer, applyMiddleware(thunk));
const persistor = persistStore(store);

0%