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

Question

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

我所理解的是它允许您返回一个函数而不是来自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 本身的目的是保存我们的应用程序状态。Redux 的一大特色是我们可以以明确定义的模式更改状态，并且我们会在应用程序中一遍又一遍地重复这种模式。

我们称之为Action Creator，它会产生一个Action。Action流入我们的中间件，然后流入我们的Reducers ，然后流入我们的应用程序状态，然后流入React。然后我们坐下来等待用户在我们的应用程序内部启动一些更改，然后再次重复该过程。

此过程适用于任何类型的同步更改。我所说的同步是指我们调用一个Action Creator，它立即流入Action、中间件和我们的Reducers中。

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

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

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

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

Dispatch 方法处理：
中间件
减速器
状态

当我们通常调用Action Creator并且它返回一个Action时，该Action最终会返回到此 Dispatch 方法中。您一直在 vanilla 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，它将被发送到我们所有不同的减速器。

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和payloadof data。