动作必须是普通对象。使用自定义中间件进行异步操作 React Native答案

【问题标题】：Actions must be plain object. Use custom middleware for async actions React Native动作必须是普通对象。使用自定义中间件进行异步操作 React Native
【发布时间】：2018-02-19 16:25:39
【问题描述】：

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { persistStore, autoRehydrate } from 'redux-persist'
import { AsyncStorage } from 'react-native';
import allReducers from '../reducers';

const store = createStore(
  allReducers,
  {},
  compose(
    applyMiddleware(thunk),
    autoRehydrate()
  )
);
persistStore(store, { storage: AsyncStorage });
export default store;

我正在使用 expo react native。我在此代码上收到上述错误

以下是动作

的代码

import * as types from './types';
import firebase from 'firebase';
import { AsyncStorage } from 'react-native';


export const getLocalToken = async () => {
    const localToken = await AsyncStorage.getItem('@auth:localToken');
    const mobileNumber = await AsyncStorage.getItem('@auth:mobileNumber');
    console.log("GLT", mobileNumber);
    if (localToken != null) {
        return (dispatch) => {
            dispatch({
                type: types.GET_LOCALTOKEN_SUCCESS,
                payload: { localToken: this.localToken, mobileNumber: this.mobileNumber }
            })
        }
    }
    else {
        return (dispatch) => {
            dispatch({
                type: types.GET_LOCALTOKEN_FAIL
            })
        }
    }

}


export const verifyOTP = (mobileNumber, OTPNumber) => {
    this.mobileNumber = mobileNumber;
    this.OTPNumber = OTPNumber
    console.log("HTTP request => ", mobileNumber);
    return (dispatch) => {
        console.log("Requesting HTTP");
        dispatch({
            type: types.OTP_ENTERED_SUBMIT
        });

        fetch('http://192.168.100.199/api/VerifyOTP', {
            method: 'POST',
            headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', },
            body: JSON.stringify({
                mobileNumber: this.mobileNumber,
                OTPNumber: this.OTPNumber
            })
        })
            .then((response) => response.json()).then(
            (responseJson) => {
                console.log('HTTP response,', responseJson);
                return verifyOTPResponse(dispatch, responseJson);
            }).catch(
            (error) => { console.error(error); }
            );
    }
}

我在调度时收到此错误。我是反应 redux 的新手。在我将 persistStore 添加到 redux 存储之前，它运行良好。我在调度时收到此错误。我是反应 redux 的新手。在我将 persistStore 添加到 redux 存储之前，它一直运行良好。

【问题讨论】：

您是否在操作中对 api 进行异步调用？
是的。我正在操作中进行 API 调用
您可以粘贴操作代码吗？
@mradziwon 在问题中添加了代码。请检查。
在 if & else 语句中有 return (dispatch) => {} 有什么原因吗？为什么不return (dispatch) => { if { dispatch({}) } else { dispatch({}) } }。这可能是您的问题的根源。

标签： react-native react-redux redux-thunk

【解决方案1】：

这只是为了帮助其他面临类似问题的人。我可能无法解决 OP 的问题，但以下内容应该可以帮助您指出正确的方向（我知道它对我有用）。

问题是由于一行const store 而出现的。我在操作https://swapi.co/api/people/21 时遇到问题，但如果我在componentWillMount 中点击它，它就可以正常工作。使用thunk 救了我。所以，我最终的store 如下所示。

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const store = createStore(allReducers, applyMiddleware(thunk));

对于任何寻求更全面答案的人，请关注this answer to an issue raised on GitHub.

【讨论】：