Thunk + Redux（在 React Native 中）：无法执行操作

Question

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

当我运行下面的代码时，我得到错误 "Actions must be plain objects, use custom middleware for async actions" 这正是我试图用 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 函数不是 return if (Firebase.auth().currentUser !== null) 子句中的函数。

你需要return一个你正在做的功能

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

调度函数（我假设是 return 的预期函数）正在 return 承诺的 then 子句中编辑。那不是 return 到外部方法 getRecipies 的分派函数。因此错误

Thunk + Redux（在 React Native 中）：无法执行操作

Thunk + Redux (in React Native) : Can't get action to work

redux-thunk