在Redux应用中处理异步操作: Redux - Thunk

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

一、使用Redux - Thunk中间件

（一）安装和配置Redux - Thunk

1. 安装Redux - Thunk
   • 首先，需要安装redux - thunk库。可以使用npm或yarn进行安装，命令如下：

   npm install redux - thunk
   

   • 或者

   yarn install redux - thunk
   

2. 配置中间件到Redux Store
   • 在创建Redux store时，需要将redux - thunk中间件应用到store中。例如，假设已经有一个rootReducer，可以这样配置store：

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

   • 这里通过applyMiddleware函数将thunk中间件添加到store中。这样，store就能够处理异步动作了。

（二）创建异步动作（Action）

1. 返回函数的动作创建者（Action Creator）
   • Redux - Thunk允许动作创建者（Action Creator）返回一个函数，而不是一个普通的动作对象。这个返回的函数可以接收dispatch和getState作为参数，用于在内部发起异步操作并在合适的时候分发新的动作。
   • 例如，创建一个异步获取数据的动作创建者：

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

   • 这个fetchData函数返回一个异步函数，在内部使用fetch进行网络请求。如果请求成功，会分发一个'FETCH_DATA_SUCCESS'类型的动作，并将获取的数据作为payload；如果请求失败，会分发一个'FETCH_DATA_ERROR'类型的动作，并将错误信息传递出去。

（三）在组件中触发异步动作

1. 使用dispatch触发异步动作
   • 在连接到Redux的容器组件中，可以使用dispatch函数来触发异步动作。例如，假设已经通过useDispatch钩子获取了dispatch函数：

   import {useDispatch} from 'react - redux';
   import {fetchData} from './actions';
   
   const MyComponent = () => {
       const dispatch = useDispatch();
   
       const handleFetchData = () => {
           dispatch(fetchData());
       };
   
       return (
           <div>
               <button onClick={handleFetchData}>Fetch Data</button>
           </div>
       );
   };
   

   • 当用户点击Fetch Data按钮时，handleFetchData函数会被调用，进而通过dispatch触发fetchData这个异步动作。然后，根据网络请求的结果，相应的'FETCH_DATA_SUCCESS'或'FETCH_DATA_ERROR'动作会被分发，最终由reducer来更新状态。

二、使用Redux - Saga

（一）安装和配置Redux - Saga

1. 安装Redux - Saga
   • 使用npm或yarn安装redux - saga库：

   npm install redux - saga
   

   • 或者

   yarn install redux - saga
   

2. 配置中间件到Redux Store
   • 首先，需要创建一个Saga函数来处理异步逻辑。例如，创建一个简单的用于获取数据的Saga：

   import {call, put, takeEvery} from 'redux - saga';
   
   function* fetchDataSaga() {
       try {
           const response = yield call(fetch, 'https://example.com/api/data');
           const data = yield call([response, 'json']);
           yield put({type: 'FETCH_DATA_SUCCESS', payload: data});
       } catch (error) {
           yield put({type: 'FETCH_DATA_ERROR', error});
       }
   }
   
   function* rootSaga() {
       yield takeEvery('FETCH_DATA_REQUEST', fetchDataSaga);
   }
   

   • 然后，在创建store时，将redux - saga中间件添加进去。假设已经有rootReducer：

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

   • 这里，通过createSagaMiddleware函数创建中间件，然后将其应用到store中，并运行rootSaga来启动Saga的监听和处理。

（二）在组件中触发异步动作

1. 通过分发请求动作触发Saga处理
   • 在组件中，只需要分发一个触发Saga处理的请求动作即可。例如，通过dispatch函数分发一个'FETCH_DATA_REQUEST'动作：

   import {useDispatch} from 'react - redux';
   
   const MyComponent = () => {
       const dispatch = useDispatch();
   
       const handleFetchData = () => {
           dispatch({type: 'FETCH_DATA_REQUEST'});
       };
   
       return (
           <div>
               <button onClick={handleFetchData}>Fetch Data</button>
           </div>
       );
   };
   

   • 当用户点击按钮时，分发'FETCH_DATA_REQUEST'动作，Saga会监听到这个动作，并执行fetchDataSaga函数来处理异步数据获取。根据获取结果，同样会分发'FETCH_DATA_SUCCESS'或'FETCH_DATA_ERROR'动作来更新状态。

三、对比Redux - Thunk和Redux - Saga

（一）概念和实现方式

1. Redux - Thunk
   • Redux - Thunk是一种简单直接的方式来处理异步操作。它通过允许动作创建者返回一个函数，在这个函数内部可以直接使用async/await或Promise来处理异步操作。这种方式比较容易理解和上手，对于简单的异步场景，如单个网络请求，非常方便。
2. Redux - Saga
   • Redux - Saga则是基于Generator函数来实现异步操作的管理。它提供了更强大的异步操作控制能力，如暂停、恢复、并发控制等。Saga使用yield关键字来暂停Generator函数的执行，等待异步操作完成，然后再继续执行。它适用于复杂的异步场景，如多个异步操作的组合、依赖关系处理等。

（二）适用场景

1. Redux - Thunk
   • 适用于简单的异步操作，如单个网络请求、简单的定时器操作等。如果应用中的异步操作不多，且逻辑相对简单，Redux - Thunk是一个很好的选择。它的代码相对简洁，容易理解和维护。
2. Redux - Saga
   • 更适合复杂的异步场景，如多个相互关联的网络请求（例如，先获取用户信息，再根据用户信息获取用户的订单列表）、需要对异步操作进行精细控制（如重试机制、并发请求控制）等。虽然它的学习曲线较陡，但在处理复杂异步逻辑时能够提供更清晰、更可维护的解决方案。