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

13 浏览
0 Comments

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

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

我所理解的是它允许你从action-creators中返回一个函数，而不是一个对象？但是这有什么好处呢？我创建了一些小的react项目，没有使用redux-thunk。

让我们来看下面的代码片段。它们的行为是相同的。

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

使用redux-thunk：

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

不使用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)
  }
}

0

3 答案

0 Comments

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/_5/minimal-code-for-redux-async-actions-c47ea85f2141

0
0 Comments

redux-thunk 的唯一好处是允许执行异步操作。在第一个例子中，您将实际由API端点返回的数据发送到reducer。而且只有在服务器返回数据后，才会发送action。在第二个例子中，您发送了一个promise到reducer，这样做是不起作用的，因为您必须在reducer内部解析promise，这违反了reducer应该是纯函数的原则。

问题的原因是在处理异步操作时，redux默认只能处理同步操作，而不能直接处理异步操作。解决方法是使用redux-thunk中间件，它允许我们在action创建函数中返回一个函数，而不仅仅是一个对象。这个函数可以接收dispatch方法和getState方法作为参数，并且可以在需要时延迟调用dispatch方法。

使用redux-thunk的好处是我们可以在action中执行异步操作，例如发送网络请求或获取数据。在第一个例子中，我们直接发送实际的数据给reducer，而在服务器返回数据后再发送action，以更新应用程序状态。这样可以确保我们在处理异步操作时不会破坏reducer的纯函数原则。

而在第二个例子中，我们尝试将promise发送给reducer，但这是行不通的，因为reducer只能接收纯对象作为action。通过使用redux-thunk，我们可以在action创建函数中处理promise，并在promise被解析后再调用dispatch方法发送action。

总之，redux-thunk的出现是为了解决redux默认只能处理同步操作的问题。它允许我们在action中执行异步操作，从而更好地管理应用程序的状态。

0
0 Comments

Redux-Thunk的出现是为了解决Redux在处理异步Action Creator时的问题。Redux本身的目的是用于管理应用的状态。它通过调用Action Creator生成Action，然后通过Middleware和Reducers将Action传递给应用的State，最终再由React来展示这个State。这个过程对于同步的变化是没有问题的，但是对于需要从异步渠道获取数据的情况，Redux就无法处理了。

在处理异步Action Creator时，Redux-Thunk发挥作用。Redux-Thunk的目的是给我们对Dispatch方法的直接控制权。Dispatch方法是ReduxStore中包含应用状态的一部分。当我们调用一个Action Creator并返回一个Action时，这个Action最终会被传递给Dispatch方法进行处理。在原始的Redux中，我们在幕后使用了Dispatch方法。

假设我们有一个在actions/index.js文件中的例子，其中我们使用axios库来获取数据：

import axios from 'axios';

export function fetchUsers() {

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

}

在这个例子中，Redux期望我们返回一个Action，但是我们还没有任何数据。我们必须等待请求完成后才能发送数据给Dispatch方法。这时，我们可以使用Redux-Thunk来处理这个异步Action Creator。

Redux-Thunk提供了另一种返回类型，即一个普通的JavaScript函数。我们可以将Dispatch方法作为参数传递给这个函数，然后在函数内部等待请求完成后再进行Action的派发。具体代码如下：

import axios from 'axios';

export function fetchUsers() {

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

return (dispatch) => {

request.then(({data}) => {

dispatch({type: 'FETCH_PROFILES', payload: data})

});

};

}

这段代码的意思是，我们会等待请求完成并获取到一定量的数据，然后才会派发一个Action。在这个例子中，Action的type是'FETCH_PROFILES'，payload是请求返回的数据。

使用Redux的优势是可以将数据的获取和状态管理集中在一起，使得应用的状态更加可控和可预测。而直接使用axios获取数据的优势是更加简单和直接，没有了Redux的复杂性。具体选择使用哪种方式，取决于应用的具体需求和开发者的偏好。

0