redux-thunk 的唯一好处是啥？

Posted 2023-02-22

【中文标题】redux-thunk 的唯一好处是啥？

【英文标题】：What is the sole benefit of redux-thunk?redux-thunk 的唯一好处是什么？

【发布时间】：2018-06-30 15:35:04

【问题描述】：

我对 redux 比较陌生。我已经阅读了很多文章，但我仍然不清楚使用redux-thunk 的真正好处是什么。

我所理解的只是它允许您从action-creators 返回一个函数而不是对象？但是有什么好处呢？我在不使用 redux-thunk 的情况下创建了几个小的 react 项目。

让我们考虑下面的 sn-ps。两者的行为相同。

如果有人可以解释我或将我指向正确的资源以更好地理解，那将是非常有帮助的。

With redux-thunk

export function fetchContacts()
  return function(dispatch)
    axios
      .get('/contacts')
      .then( contacts => dispatch( type: 'FETCH_CONTACTS', payload: contacts))
  

Without redux-thunk

const client = axios.create(
  baseURL: "http://localhost:3000",
  headers: 
    "Content-Type": "application/json"
  
)
const url = '/contacts';
export function fetchContacts()
  return 
    type: 'FETCH_CONTACTS',
    payload: client.get(url)
  

【问题讨论】：

***.com/questions/34713466/…的可能重复

Why use Redux Thunk的可能重复

【参考方案1】：

Redux 本身的目的是保存我们的应用程序状态。 Redux 的一大特点是我们可以以定义明确的模式改变我们的状态，这是我们在应用程序中一遍又一遍地重复的模式。

我们称之为Action Creator，这会产生一个Action。 Action 流入我们的 Middleware，然后是我们的 Reducers，然后流入我们的应用程序 State，然后流入 反应。然后我们坐下来等待用户在我们的应用程序内部启动一些更改，从而重新重复该过程。

此过程适用于任何类型的同步更改。同步我的意思是我们调用一个Action Creator，它立即流入一个Action、Middleware和我们的Reducers。

但是，我们构建的绝大多数 Web 应用程序都需要从异步通道中获取数据。换句话说，调用从 API 或一些异步操作获取数据的 Action Creator 更为常见，只有当该请求解决时，我们才真正准备好创建 Action.

Vanilla Redux 未设置为开箱即用地处理此问题。

那么，我们如何处理这些异步Action Creators？

这就是 Redux-Thunk 发挥作用的地方。 Redux-Thunk 的目的是让我们直接控制 Dispatch 方法。 Dispatch 方法是包含我们应用程序状态的 ReduxStore 的一部分。

Dispatch 方法处理：中间件ReducersState

当我们通常调用 Action Creator 并返回一个 Action 时，Action 最终会返回到此 Dispatch 方法中。你一直在原版 Redux 中使用 Dispatch 方法。

所以在实践中，假设您在actions/index.js 中有一个文件：

import axios from 'axios';

export function fetchUsers() 
   const request = axios.get('http://somejsondata.com/users');

Redux 期望我们返回一个动作，但我们还没有任何数据。在我将任何数据发送到我的 Dispatch 方法之前，我必须等待我的请求得到解决。

所以，让我们使用 Redux-Thunk，其中所有针对动作创建者的现有规则都会消失。 Redux 期望我们返回一个 Action，它是一个普通的 javascript 对象。

Redux-Thunk 启用了另一种返回类型，它是一个普通的 JavaScript 函数。

import axios from 'axios';

export function fetchUsers() 
   const request = axios.get('http://somejsondata.com/users');

   return () => 

   ;

第一个参数将是dispatch 方法：

import axios from 'axios';

export function fetchUsers() 
   const request = axios.get('http://somejsondata.com/users');

   return (dispatch) => 

   ;

如果我们将 Action 传递给 dispatch，它将被发送到我们所有不同的 reducer。

export function fetchUsers() 
       const request = axios.get('http://somejsondata.com/users');

       return (dispatch) => 
         request.then((data) => 
           dispatch(type: 'FETCH_PROFILES', payload: data)
         );
       ;
    

这就是说，我们将等待请求解决一些数据量，只有当它有时，我才会调度一个动作。在这种情况下，它将有type FETCH_PROFILES 和payload 的data。

【讨论】：

使用 redux（actions）和 axios 来获取数据比仅仅使用 axios 有什么优势吗？

使用 redux（actions）和 axios 来获取数据比仅仅使用 axios 有什么优势吗？

【参考方案2】：

redux-thunk 允许您延迟您的操作，以便在调度之前进行异步调用。假设您正在检索用户设置。常见的用例是发送 REQUEST_FOR_USER_SETTINGS_IN_PROGRESS 操作，以便您可以在应用程序中显示加载程序，然后对数据发出 http 请求，当您收到响应时，发送 SUCCESS 或 ERROR 操作以更新 UI。它看起来像这样：

const requestToGetCoins = await() => 
return (dispatch) => 
    dispatch(requestToGetUserSettingsInProgress());
    try
      const users = async httpService.getUserSettings();
      dispatch(requestToGetUserSettingsSuccess(users));
    
    catch(e)
      dispatch(requestToGetUserSettingsError(e));
    
;

;

只是想强调，在 redux 中处理异步操作有比 redux-thunk 更好的方法，它使用处理异步操作并减少大部分样板的临时中间件。我建议你看看这个： https://medium.com/@sht_5/minimal-code-for-redux-async-actions-c47ea85f2141

【参考方案3】：

redux-thunk 允许您执行异步操作。

在您的第一个示例中，您将 API 端点返回的实际数据发送到减速器。并且只有在服务器返回数据后才会发送动作。

在您的第二个示例中，您向减速器发送了一个不起作用的承诺，因为您必须在减速器内部解决您的承诺，这违反了减速器应该是纯函数的原则。