Redux Thunk

简介

Redux Thunk 是一个用于处理 Redux 异步操作的中间件。它允许你在 Redux 应用中，编写返回函数而不是普通 action 对象的 action 创建函数。这些返回函数可以在任意时间点被调用，可以用来延迟 action 的派发，或者是处理副作用、异步流程等。

安装

使用以下命令安装 Redux Thunk：

npm install redux-thunk

或者，如果你使用的是 Yarn：

yarn add redux-thunk

配置

在 Redux 应用中使用 Redux Thunk，你需要在创建 Redux store 时将它作为 middleware 应用。具体步骤如下：

1. 首先，通过 Redux 的 applyMiddleware 函数将 Redux Thunk 应用到 store：

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

2. 接下来，在编写 action 创建函数时，可以返回一个函数来实现异步操作。这个函数将接收 Redux 的 dispatch 和 getState 作为参数：

   const fetchData = () => {
     return (dispatch, getState) => {
       // 执行异步操作，例如通过 AJAX 请求数据
       axios.get('/api/data')
         .then(response => {
           // 异步操作完成后，派发一个普通的 action 对象
           dispatch({ type: 'FETCH_SUCCESS', payload: response.data });
         })
         .catch(error => {
           // 异步操作失败时，派发一个错误的 action 对象
           dispatch({ type: 'FETCH_ERROR', error: error.message });
         });
     };
   };
   

   这样，当调用 fetchData 方法时，实际上会返回一个函数。这个函数在被 Redux Thunk 中间件处理后，将会被调用，并且接收 dispatch 和 getState 作为参数。

3. 最后，在你的组件中，可以通过调用这个返回的函数来实现异步操作：

   import { useDispatch } from 'react-redux';
   import { fetchData } from '../actions';
   
   const MyComponent = () => {
     const dispatch = useDispatch();
     
     const loadData = () => {
       dispatch(fetchData());
     };
   
     // ...
   };
   

   这样，当 loadData 被调用时，Redux Thunk 中间件会截获到这个函数，并将它传递给 Redux 的 dispatch 方法。

总结

Redux Thunk 提供了一种简单而强大的方式来处理 Redux 中的异步操作。它允许你编写返回函数的 action 创建函数，以便在需要时进行异步调用。通过 Redux Thunk，你可以更好地处理副作用、实现异步流程，并更好地管理状态的变化。