我正在尝试将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));
});
}
};
};