React Native 中如何处理 Redux 中的异步操作？

推荐答案

在 React Native 中处理 Redux 中的异步操作，通常使用中间件来实现。最常用的中间件是 redux-thunk 和 redux-saga。以下是两种方式的实现方法：

使用 redux-thunk

1. 安装 redux-thunk：

   npm install redux-thunk

2. 配置 redux-thunk 中间件：

   import { createStore, applyMiddleware } from 'redux';
   import thunk from 'redux-thunk';
   import rootReducer from './reducers';
   
   const store = createStore(
     rootReducer,
     applyMiddleware(thunk)
   );

3. 创建异步 action：

   // www.javascriptcn.com code example
   const fetchData = () => {
     return async (dispatch) => {
       dispatch({ type: 'FETCH_DATA_REQUEST' });
       try {
         const response = await fetch('https://api.example.com/data');
         const data = await response.json();
         dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
       } catch (error) {
         dispatch({ type: 'FETCH_DATA_FAILURE', error });
       }
     };
   };

使用 redux-saga

1. 安装 redux-saga：

   npm install redux-saga

2. 配置 redux-saga 中间件：

   // www.javascriptcn.com code example
   import { createStore, applyMiddleware } from 'redux';
   import createSagaMiddleware from 'redux-saga';
   import rootReducer from './reducers';
   import rootSaga from './sagas';
   
   const sagaMiddleware = createSagaMiddleware();
   
   const store = createStore(
     rootReducer,
     applyMiddleware(sagaMiddleware)
   );
   
   sagaMiddleware.run(rootSaga);

3. 创建 saga：

   // www.javascriptcn.com code example
   import { call, put, takeEvery } from 'redux-saga/effects';
   import { FETCH_DATA_REQUEST, fetchDataSuccess, fetchDataFailure } from './actions';
   
   function* fetchData() {
     try {
       const response = yield call(fetch, 'https://api.example.com/data');
       const data = yield response.json();
       yield put(fetchDataSuccess(data));
     } catch (error) {
       yield put(fetchDataFailure(error));
     }
   }
   
   function* rootSaga() {
     yield takeEvery(FETCH_DATA_REQUEST, fetchData);
   }
   
   export default rootSaga;

本题详细解读

redux-thunk 的工作原理

redux-thunk 是一个 Redux 中间件，它允许 action creators 返回一个函数而不是一个 action 对象。这个函数接收 dispatch 和 getState 作为参数，可以在函数内部执行异步操作，并在操作完成后手动调用 dispatch 来分发 action。

redux-saga 的工作原理

redux-saga 是一个用于管理应用程序副作用（如异步操作）的库。它使用 ES6 的 generator 函数来处理异步操作。redux-saga 通过监听特定的 action，并在这些 action 被分发时执行相应的 saga 函数。saga 函数可以使用 call、put 等 effect 来执行异步操作和分发 action。

选择 redux-thunk 还是 redux-saga

• redux-thunk：适合简单的异步操作，易于理解和实现。
• redux-saga：适合复杂的异步操作，提供了更强大的控制流和副作用管理能力，但学习曲线较陡。

根据项目的复杂度和团队的技术栈选择合适的方案。