Question

我是这个堆栈的新手。我已经看到了很多其他与此相关的问题，并且阅读了Thunk文档，但是我无法将它们组合在一起。

当我运行下面的代码时，出现错误“操作必须是简单的对象，请对异步操作使用自定义中间件”，这正是我正试图通过Thunk解决的问题。

我的动作如下：

src/actions/recipes.js

// this calls the API
function fetchApiGetRecipes() {
  return fetch('https://mywebsite.com/endpoint/', {
    method: 'GET',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + idToken
    }
  }).then((json) => {
    dispatch({
      type: 'RECIPES_REPLACE',
      data: json
    })

  });
}

// this is passed into my container to use to refresh the recipe list
export function getRecipes() {    
  if (Firebase === null) return () => new Promise(resolve => resolve());

  if (Firebase.auth().currentUser !== null) {
          Firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken) {            
            // console.log(idToken);
            return dispatch => new Promise(resolve => fetchApiGetRecipes(idToken) )                  
          }).catch(function(error) {
            // Handle error
          });

  } else {
    console.log("Null user");
  }

}

在此处使用Thunk并修复应用程序启动时出现的错误的正确语法是什么？

编辑：我这样创建商店：

import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, persistCombineReducers } from 'redux-persist';
import storage from 'redux-persist/es/storage'; // default: localStorage if web, AsyncStorage if react-native
import thunk from 'redux-thunk';
import reducers from '../reducers';

// Redux Persist config
const config = {
  key: 'root',
  storage,
  blacklist: ['status'],
};

const reducer = persistCombineReducers(config, reducers);

const middleware = [thunk];

const configureStore = () => {
  const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
    compose(applyMiddleware(...middleware)),
  );

  const persistor = persistStore(
    store,
    null,
    () => { store.getState(); },
  );

  return { persistor, store };
};

export default configureStore;

Answer 1

可能您忘记将dispatch传递给func args吗？

// you use dispatch in this func
function fetchApiGetRecipes() {...}

// you forget pass
return dispatch => new Promise(resolve => fetchApiGetRecipes(idToken) )

Answer 2

您的getRecipes函数不在if (Firebase.auth().currentUser !== null)子句中返回函数。

您需要返回您正在执行的功能

Firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken) {            
            // console.log(idToken);
            return dispatch => new Promise(resolve => fetchApiGetRecipes(idToken) )                  
          }).catch(function(error) {
            // Handle error
          });

在promise的then子句中返回了调度功能（我想是要返回的功能）。这不会将分派函数返回给外部方法getRecipies。因此，错误

Thunk + Redux（在React Native中）：无法采取行动

2 个答案: