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

时间:2017-09-11 12:12:58

标签: react-native react-redux redux-thunk

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反应原生。我在这段代码上得到了上述错误

以下是操作

的代码
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商店之前,它运行良好。

1 个答案:

答案 0 :(得分:0)

这只是为了帮助其他面临类似问题的人。我可能无法解决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.