当我使用firebaseConnect时出现错误。我正在使用Express进行服务器端借阅,以服务React应用程序

时间:2019-04-06 10:51:57

标签: reactjs redux ssr react-redux-firebase

我正在使用express,redux,react-redux-firebase,ejs创建一个新的应用程序。

我有一个带有firebase数据库的redux存储,但是当我在组件中使用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)

...

我已经尝试过更改react-redux-firebase和react-redux的版本,当前它们设置为“ react-redux”:“ ^ 5.0.7”, “ react-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)

...

Express服务器代码: ...

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)
  }));
});

...

0 个答案:

没有答案