Ошибка при подключении FireStore к Redx Store, несмотря на правильную настройку - PullRequest
Новая
       20

Ошибка при подключении FireStore к Redx Store, несмотря на правильную настройку

1 голос
/ 11 марта 2020

Я пытаюсь отобразить список документов, которые я сохранил в пожарном депо в ответ на избыточность. Однако, несмотря на настройку моего хранилища и моих действий, кажется, что реакция не может найти объект firestore, что приводит к ошибкам, таким как cannot call map() of undefined.

Я полагаю, что все настроено правильно в соответствии с последней документацией react-redux : v6 и react-redux-firebase : v3 но они просто не хотят хорошо играть вместе! Я пролил свой код, но не могу найти проблему:

App.tsx 

import React from 'react';
import Navbar from './components/layout/Navbar';
//import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Dashboard from './components/dashboard/Dashboard';
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './store/reducers/rootReducer';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import {
  createFirestoreInstance,
  getFirestore,
  reduxFirestore,
} from 'redux-firestore';
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase';
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const firebaseConfig = {

};

firebase.initializeApp(firebaseConfig);
firebase.firestore();
const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(
      thunk.withExtraArgument({
        getFirebase,
        getFirestore,
      })
    ),
    reduxFirestore(firebase)
  )
);

const rrfConfig = {
  useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB
};
const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance, // <- needed if using firestore
};
function App() {
  return (
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <div className="App">
          <Navbar></Navbar>
          <Dashboard></Dashboard>
        </div>
      </ReactReduxFirebaseProvider>
    </Provider>
  );
}

export default App;

Root редуктор 

import authReducer from './authReducer';
import postReducer from './postReducer';

import { combineReducers } from 'redux';
import { firestoreReducer, firebaseReducer } from 'react-redux-firebase';

const rootReducer = combineReducers({
  auth: authReducer,
  postData: postReducer,
  firebase: firebaseReducer,
  firestore: firestoreReducer,
});

export default rootReducer;

Действия

Несмотря на то, что у меня есть определенное действие для создания публикации (это работает), я не могу получить доступ к свойству ordered объекта firestore, как я могу получить доступ к коллекциям документов? 

export const createProject = (post: { [key: string]: any }) => {
  return (dispatch: Function, getState: any, { _, getFirestore }: any) => {
    //anyc code start
    const firestore = getFirestore();
    firestore
      .collection('posts')
      .add({
        ...post,
        createdAt: new Date(),
      })
      .then(() => {
        dispatch({
          type: 'CREATE_POST',
          post: post,
        });
      })
      .catch((err: Error) => {
        //dispatch({ type: 'CREATE_POST_ERROR', error: err });
        console.log(err);
      });
    //async code end
  };
};

PostTable

Здесь я пытаюсь отобразить сообщения: 

import React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { firestoreConnect } from 'react-redux-firebase';

const PostTable = (props: { [key: string]: any }) => {
  console.log(props);
  return (
    <table className="table table-striped">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
        </tr>
      </thead>
      <tbody>
        {props.posts.map((post: { [key: string]: any }) => {
          return (
            <tr key={post.id}>
              <th scope="row">{post.id}</th>
              <td>{post.title}</td>
              <td>{post.content}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

const mapStateToProps = (state: { [key: string]: any }) => {
  console.log(state);
  return {
    posts: state.firestore.ordered.posts,
  };
};

export const PostTableCompose = compose(
  connect(mapStateToProps),
  firestoreConnect([
    {
      collection: 'posts',
    },
  ])
)(PostTable) as React.ComponentType;
...