redux-thunk 的唯一好处是什么？

Question

我对 redux 比较陌生。我已经阅读了很多文章，但我仍然不清楚使用 redux-thunk.

的真正好处是什么

我的理解是它允许您 return 函数而不是 action-creators 中的对象？但是有什么好处呢？我在不使用 redux-thunk 的情况下创建了几个小型 React 项目。

让我们考虑以下片段。两者的行为相同。

如果有人可以向我解释或指出正确的资源以便我更好地理解，那将会很有帮助。

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)
  }
}

Answer 1

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

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

在你的第二个例子中，你向你的 reducer 发送了一个 promise，它不起作用，因为你必须在 reducer 内部解决你的 promise，这打破了 reducer 应该是纯函数的原则。

Answer 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

Answer 3

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

我们调用一个 Action Creator，这会产生一个 Action。 Action 流入我们的 Middleware，然后我们的 Reducers 流入我们的应用程序 State 然后进入 React。然后我们坐下来等待用户在我们的应用程序内部发起一些更改，再次重复该过程。

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

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

Vanilla Redux 未设置为开箱即用。

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

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

Dispatch 方法处理：
中间件
减速机
州

当我们通常调用一个 Action Creator 并且它 return 是一个 Action 时，Action 最终被 return 编辑到此 Dispatch 方法中。你已经在 vanilla Redux 的幕后使用了 Dispatch 方法。

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

import axios from 'axios';

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

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

所以，让我们使用 Redux-Thunk，其中所有现有的动作创建者规则都在 window 之外。 Redux 期望我们 return 一个 Action 这是一个普通的 JavaScript 对象。

Redux-Thunk 启用另一种 return 类型，这是一个普通的 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 of data.

redux-thunk 的唯一好处是什么？

What is the sole benefit of redux-thunk?

javascript

reactjs

redux

redux-thunk