Блог

Я занимаюсь реакцией уже несколько месяцев, и на одном из курсов udemy у меня был базовый шаблон, в котором использовалась firebase. Я подумал, что было бы хорошим упражнением попытаться обновить мой базовый шаблон, чтобы использовать firestore вместо firebase. Я думал, что это будет намного проще, чем есть на самом деле — так много движущихся частей, а затем даже внутри движущихся частей есть различия в версиях.

Проблема, с которой я столкнулся после того, как немного переместил все, заключается в том, что я не могу отправить обновление хранилища при входе пользователя в систему. Я подозреваю, что это указывает на более серьезную проблему. Я постараюсь включить достаточно кода, чтобы у кого-то могла возникнуть идея.

   //configureStore.js
  const initialState = window amp;amp; 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();
 

аутентификация файла us

   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 dev, что auth неверен

auth: { Ошибка аутентификации: null },

в редукторе оператор switch искал неправильный тип действия. Как только я исправил это, все было в порядке.

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