Question

我正在尝试实施 Redux操作，使用 React Native 通过异步调用检索一些 json 数据。我把函数 fetchRestaurant（）放在组件内的任何地方，但我仍然会收到此错误：

无法读取属性＆＃39;未定义的类型。

这里是 action / restaurant.js

中的代码

'items' : {}

这是我对组件中 fetchRestaurant（）函数的调用：

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

}

Answer 1

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

这是你的动作创作者写的Redux thunk：

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

    }
}

<强>终极版-形实转换

请记住，在配置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 action creator返回一个函数的原因。因为这个函数将被中间件调用，并允许我们访问调度和获取状态，这意味着我们可以在以后调度进一步的操作。

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

<强>终极版-诺

还原thunk用于处理异步Redux操作的另一种方法是redux-promise。而不是返回函数的动作创建者，您可以派遣返回承诺的动作创建者。

以下是一个例子：

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

你当然可以结合使用redux-promise和redux-thunk中间件，这样你就可以派遣那些叫做dispatch promises的函数

与reducer的异步调用不起作用

1 个答案: