将更新发送到不再工作的存储



我已经做了几个月的react了,在一门udemy课程中,我有一个使用firebase的基本模板。我认为尝试更新我的基础模板以使用firestore而不是firebase将是一个很好的练习。我认为这会比实际简单得多——有这么多运动部件,即使在运动部件中也有版本差异。

在移动了所有东西之后,我遇到的问题是,当用户登录时,我似乎无法调度来更新商店。我怀疑这表明存在更大的问题。我将尝试包含足够多的代码,以便有人有一个想法。

//configureStore.js
const initialState = window && window.__INITIAL_STATE__ // set initial state here
firebase.initializeApp(firebaseConfig)
firebase.firestore().settings({ timestampsInSnapshots: true })  
const store = createStore(rootReducer,
initialState,
compose(
applyMiddleware(reduxThunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
));
export const auth = firebase.auth();
export const firestore = firebase.firestore();
const googleAuthProvider = new firebase.auth.GoogleAuthProvider();

export { googleAuthProvider, firebase, store as default}

app.js:

//app.js
const rrfConfig = {
useFirestoreForProfile: true,
userProfile: "users",
attachAuthIsReady: true,
};
const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance,
};
/* working firestore code
ReactDOM.render(
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<AppRouter />
</ReactReduxFirebaseProvider>
</Provider>,
document.getElementById("app")
);
*/
const jsx = (<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<AppRouter />
</ReactReduxFirebaseProvider>
</Provider>)

let hasRendered = false;
const renderApp = () => {
if (!hasRendered) {
ReactDOM.render(jsx, document.getElementById('app'));
hasRendered = true;
}
};

ReactDOM.render(<LoadingPage />, document.getElementById('app'));
firebase.auth().onAuthStateChanged((user) => {
if (user) {
store.dispatch(login(user.uid));
console.log ("store", store);
console.log ("This prints out the UID correctly", user.uid);
store.dispatch(startSetTweets()).then(() => {
renderApp();

授权文件

export const login = (uid) => ({
type: 'LOGIN',
uid
});

操作js文件

export const startSetTweets = () => {
return (dispatch, getState) => {
const uid = getState().auth.uid;
console.log("this returns undefined = ", uid);

我可以在我的redux开发工具中看到auth不是正确的

身份验证:{authError:null},

在reducer中,switch语句正在查找错误的操作类型。一旦我纠正了这一点,一切都很好。

const authReducer = (state = initState, action) => {
switch(action.type){
case 'LOGIN':
return {
uid: action.uid,
...state,
authError: null
};

最新更新