使用reducer的异步调用不起作用

Question

我正在尝试实现一个Redux操作，该操作通过使用React Native的异步调用来检索一些json数据。我在组件中的所有地方都放了函数fetchRestaurant()，但我仍然得到了这个错误：

无法读取未定义的属性类型。

这是action/arestaurant.js中的代码

export function setFetchedRestaurant(restaurants){
return   Object.assign({ type: types.SET_FETCHED_RESTAURANT, restaurants:restaurants } );
}

export function fetchRestaurant(){
var restaurants;
fetch('https://appetizing.000webhostapp.com/connect.php').then((response) => response.text()).then((responseText) => { dispatch(setFetchedRestaurant(JSON.parse(responseText)));}).catch((error) => {console.warn(error);});
}

这是我对组件中fetchRestaurant()函数的调用：

componentDidMount(){
this.props.fetchRestaurant();
}

Answer 1

您需要使用中间件来处理异步操作。Redux-thunk就是这样一个中间件。

这是你的动作创作者写的一个Redux暴徒：

export function fetchRestaurant() {
return (dispatch) => {
var restaurants
fetch('https://appetizing.000webhostapp.com/connect.php')
.then((response) => response.text())
.then((responseText) => {
dispatch(setFetchedRestaurant(JSON.parse(responseText)));
})
.catch((error) => {
console.warn(error);
});
}
}

还原thunk

记住，要做到这一点，您需要在配置redux商店时将redux thunk插入中间件链

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

Thunk Action的创建者是如何工作的

这个单一的thunk操作创建者是一个将由我们的redux thunk中间件处理的操作创建者，因为它符合与thunk动作创建者相关的签名，也就是说，它返回一个函数。

当调用store.dispatch时，我们的操作将在到达商店之前通过中间件链。Redux-Thunk是一个中间件，它将看到我们的操作是一个函数，然后赋予该函数访问商店调度和获取状态的权限。

以下是Redux thunk内部的代码：

if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}

好的，这就是为什么我们的thunk动作创建者返回一个函数。因为这个函数将由中间件调用，并允许我们访问dispatch和get state，这意味着我们可以在以后调度进一步的操作。

记住redux thunk并不是唯一的解决方案。如果我们想发送promise而不是函数，我们可以使用redux-promise。然而，我建议从redux thunk开始，因为这是最简单的解决方案。

减少承诺

redux-thunk处理异步redux操作的另一种方法是redux-promise。您可以调度返回承诺的动作创建者，而不是返回函数的动作创建者。

这里有一个例子：

function actionExample(payload){
return new Promise( (resolve, reject) => {
resolve(data); 
});
}

当然，您可以将redux-promise和redux-thunk中间件结合起来，这样您就可以调度在调用dispatch promise 时所使用的函数