Получение ошибки, когда я использую firebaseConnect.Я использую раздачу на стороне сервера, используя экспресс, чтобы обслуживать приложение реакции - PullRequest
Новая
       22

Получение ошибки, когда я использую firebaseConnect.Я использую раздачу на стороне сервера, используя экспресс, чтобы обслуживать приложение реакции

0 голосов
/ 06 апреля 2019

Я создаю новое приложение, реагирующее с express, redux, Reaction-redux-firebase, ejs.

У меня есть хранилище резервов с базой данных firebase, но когда я использую firebaseConnect в своем компоненте, он выдает ошибку, которая говорит

Ошибка выдачи: 

TypeError: Cannot read property 'firebase' of undefined
    at FirebaseConnect.componentWillMount (/home/smartsense/node-express/react-server-boilerplate/node_modules/react-redux-firebase/lib/firebaseConnect.js:72:35)
    at processChild (/home/smartsense/node-express/react-server-boilerplate/node_modules/react-dom/cjs/react-dom-server.node.development.js:2922:16)
    at resolve (/home/smartsense/node-express/react-server-boilerplate/node_modules/react-dom/cjs/react-dom-server.node.development.js:2812:5)
    at ReactDOMServerRenderer.render (/home/smartsense/node-express/react-server-boilerplate/node_modules/react-dom/cjs/react-dom-server.node.development.js:3202:22)
    at ReactDOMServerRenderer.read (/home/smartsense/node-express/react-server-boilerplate/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:29)
    at renderToString (/home/smartsense/node-express/react-server-boilerplate/node_modules/react-dom/cjs/react-dom-server.node.development.js:3646:27)
    at /home/smartsense/node-express/react-server-boilerplate/dist/server.js:79:47
    at Layer.handle [as handle_request] (/home/smartsense/node-express/react-server-boilerplate/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/smartsense/node-express/react-server-boilerplate/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/home/smartsense/node-express/react-server-boilerplate/node_modules/express/lib/router/route.js:112:3)

...

Я уже пытался изменить версию response-redux-firebase и Reaction-redux, и в настоящее время они настроены на «response-redux»: «^ 5.0.7», «response-redux-firebase»: «^ 2.1.6».

Основной файл: ... 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './index';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { reactReduxFirebase, getFirebase, firebaseReducer } from 'react-redux-firebase';
import fbConfig from '../config/fbconfig'


const rootReducer = combineReducers({
    firebase: firebaseReducer,
});


const store = createStore(rootReducer, 
    compose(
      applyMiddleware(thunk.withExtraArgument({getFirebase})),
      reactReduxFirebase(fbConfig), // redux binding for firebase
    )
);

// console.log("Store : " + JSON.stringify(store));

ReactDOM.render(<Provider store ={ store }><App/></Provider>, document.getElementById('root'));

...

Компонент: ... 

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { firebaseConnect } from 'react-redux-firebase'
import { compose } from 'redux'

class App extends Component {
  render() {

    console.log(this.props);

    const { isMobile } = this.props;

    return (
      <div>
        <h1>hello world {isMobile ? 'mobile' : 'desktop'}</h1>

        <h1>Dashboard</h1>
      </div>
    );
  }
}

export default compose(
  firebaseConnect((props) => {
    return [
      'Tasks'
    ]
  }),
  connect(
    (state) => ({
      tasks: state.firebase.data.Tasks,
      // profile: state.firebase.profile // load profile
    })
  )
)(App)

...

Экспресс код сервера: ... 

server.get('/', (req, res) => {
  const isMobile = true;
  const myName = "Neeraj Bansal";
  const initialState = { isMobile, myName };
  const appString = renderToString(<App {...initialState} />);

  res.send(template({
    body: appString,
    title: 'Hello World from the server',
    initialState: JSON.stringify(initialState)
  }));
});

...

...