代码之家  ›  专栏  ›  技术社区  ›  Juan

与Redux thunk异步/等待。获取错误:操作必须是普通对象。对异步操作使用自定义中间件

  •  0
  • Juan  · 技术社区  · 6 年前

    我正在尝试将async Wait与redux thunk中间件一起使用,但我看到了红色屏幕,错误操作必须是普通对象。对异步操作使用自定义中间件。我想我没有返回正确类型的值。我按下按钮将twitter用户链接到现有的firebase帐户。该按钮到达一个名为toggleTwitterAuthState的函数:

    export const toggleTwitterAuthState =  (twitterIsCurrentlyLinked, contributorUserId) => {
    
      let actionName = "";
    
    
        if (twitterIsCurrentlyLinked) {
          console.log("Unlinking twitter");
          actionName = "TWITTER_UNLINK";
           unlinkTwitterAccount(contributorUserId);
        } else {
          console.log("Linking twitter");
          linkTwitterAccount(contributorUserId);
          actionName = "TWITTER_LINK";
        }
    
    
    
    };
    

    它调用函数linkTwitterAccount,我正在使用react本机调试器在返回的异步(dispatch)上放置一个断点,它到达了那里,但里面的代码从未执行,我得到了带有上述错误的红色屏幕

    linkTwitterAccount =  (contributorUserId) => {
    
           return async (dispatch)=>{
    
            console.log("about to link twitter user");
            RNTwitterSignIn.init(config.twitter.consumer_key, config.twitter.consumer_secret);
            dispatch(authOperationBegan());
    
            let linkToTwitterResult;
            let twitterTokensObject;
            let loginData;
            //get credentials
    
            try {
              loginData = await RNTwitterSignIn.logIn();
              console.log("Twitter login data", loginData);
            } catch (err) {
              console.log("Error with twitter login result", error);
              dispatch(authOperationFailed(err));
            }
    
            //link to react native firebase
    
            try {
    
              const {
                authToken,
                authTokenSecret
              } = loginData;
              const user = firebase.auth().currentUser;
              // create a new firebase credential with the token
              const twitterCredential = firebase.auth.TwitterAuthProvider.credential(authToken, authTokenSecret);
              console.log(twitterCredential);
    
              // link to this account with credential
              const linkingResult = await user.linkAndRetrieveDataWithCredential(twitterCredential);
              console.log("Success Linking twitter", linkingResult);
    
              var currentUser = linkingResult.user;
    
              var displayName;
              var photoUrl;
              var email;
              var phoneNumber;
              var twitterUserId;
    
              currentUser.providerData.map(elem => {
                if (elem.providerId == "twitter.com") {
    
                  displayName = elem.displayName;
                  photoUrl = elem.photoURL;
                  email = elem.email;
                  phoneNumber = elem.phoneNumber;
                  twitterUserId = elem.uid;
    
                }
              });
    
    
              twitterTokensObject = {
                "contributor_user_id": contributorUserId,
                "twitter_id": twitterUserId,
                "twitter_access_token": authToken,
                "twitter_access_token_secret": authTokenSecret,
                "display_name": displayName,
                "photo_url": photoUrl,
                "phone_number": phoneNumber,
                "email": email
              };
    
    
            } catch (err) {
              alert("Error linking asociando cuenta: " + err);
              dispatch(authOperationFailed(err));
            }
    
            //TODO: upsert twitter user data to DB
    
            dispatch(authOperationFinished());
           }
          }
    

    我的redux-thunk配置是这样的,我是从一门udemy课程中学到的,在那里,一个人使用了一个componse函数 https://www.udemy.com/react-native-the-practical-guide/ :

    import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
    import thunk from "redux-thunk";
    
    import foundationsReducer from './reducers/foundations';
    import sponsorsReducer from './reducers/sponsors';
    import authReducer from './reducers/auth';
    
    const rootReducer = combineReducers({
        foundations: foundationsReducer,
        sponsors: sponsorsReducer,
        auth:authReducer
    });
    
    let composeEnhancers = compose;
    
    if (__DEV__) {
        composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    }
    
    const configureStore = () => {
        return createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));
    };
    
    export default configureStore;
    

    我在索引上使用此redux thunk配置。js公司:

    import React from 'react';
    import { AppRegistry } from 'react-native';
    import { Provider } from 'react-redux';
    import App from './App';
    import configureStore from './src/store/configureStore';
    
    const store = configureStore();
    
    const RNRedux = () => (
        <Provider store={store}>
            <App />
        </Provider>
    );
    
    AppRegistry.registerComponent('rnfundkers', () => RNRedux);
    

    只是想让您知道,redux thunk正在为其他操作工作,但这个异步等待案例在某种程度上有所不同,我看不出来。你知道会出什么问题吗?如果我去掉包装器和调度,函数本身就会工作,它会做它必须做的事情,但是因为我需要这些调度来更新微调器,所以这个问题就出现了。谢谢

    编辑:以下是操作:

    export const authOperationBegan =  () => {
      return {
        type: AUTH_OPERATION_BEGAN
      };
    }
    
    export const authOperationFinished =  () => {
      return {
        type: AUTH_OPERATION_FINISHED
      };
    }
    
    export const authOperationFailed =  (err) => {
      return {
        type: AUTH_OPERATION_FAILED,
        error: err
      };
    }
    

    我还有其他功能可以调度相同的3个动作,它们工作正常,例如:

    export const tryAuth = (authData, authMode) => {
      return dispatch => {
        dispatch(authOperationBegan());
    
        const email = authData.email,
          password = authData.password;
    
        if (authMode === "signup") {
    
          firebase.auth().createUserWithEmailAndPassword(email, password)
            .then((user) => {
    
    
              // TODO: upsert user to our db
              dispatch(authOperationFinished());
    
            })
            .catch((error) => {
              const {
                code,
                message
              } = error;
    
              dispatch(authOperationFailed(err));
    
            });
    
        } else if (authMode == "login") {
    
          firebase.auth().signInAndRetrieveDataWithEmailAndPassword(email, password)
            .then((data) => {
    
              dispatch(authOperationFinished());
    
            })
            .catch((error) => {
              const {
                code,
                message
              } = error;
              console.log("error", message);
    
              dispatch(authOperationFailed(err));
    
            });
    
        }
    
      };
    };
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   DarkThrone    6 年前

    你必须发出你的声音

    export const toggleTwitterAuthState =  (twitterIsCurrentlyLinked, contributorUserId) => dispatch => {
      let actionName = "";
      if (twitterIsCurrentlyLinked) {
        console.log("Unlinking twitter");
        actionName = "TWITTER_UNLINK";
        unlinkTwitterAccount(contributorUserId);
      } else {
        console.log("Linking twitter");
        dispatch(linkTwitterAccount(contributorUserId));
        actionName = "TWITTER_LINK";
      }
    };