react-redux-firebase - TypeError：无法读取 FirebaseConnect.componentWillMount 未定义的属性“firebase”

Question

我从https://github.com/tiberiuc/redux-react-firebase复制了这个例子：

rootReducer.js：

import { createStore, combineReducers, compose } from 'redux'
import { reactReduxFirebase, firebaseStateReducer } from 'react-redux-firebase'

// Add Firebase to reducers
const rootReducer = combineReducers({
    firebase: firebaseStateReducer
})

// Firebase config
const config = {
    apiKey: 'AIzaSyCXydC2cGp_8BNEMqLqpHVSczGyti7j6A8',
    authDomain: 'cabal-production.firebaseapp.com',
    databaseURL: 'https://cabal-production.firebaseio.com',
    storageBucket: 'cabal-production.appspot.com'
}

// Add redux Firebase to compose
const createStoreWithFirebase = compose(
    reactReduxFirebase(config, { userProfile: 'users' }),
)(createStore)

// Create store with reducers and initial state
const initialState = {}
const store = createStoreWithFirebase(rootReducer, initialState)

tod​​os.js：

import React, { Component } from 'react'
import PropTypes from 'prop-types' // can also come from react if react <= 15.4.0
import { connect } from 'react-redux'
import { compose } from 'redux'
import {
    firebaseConnect,
    isLoaded,
    isEmpty,
    dataToJS,
    pathToJS
} from 'react-redux-firebase'

class Todos extends Component {
    static propTypes = {
        todos: PropTypes.object,
        auth: PropTypes.object,
        firebase: PropTypes.object
    }

    addTodo = () => {
        const { newTodo } = this.refs
        return this.props.firebase
            .push('/todos', { text: newTodo.value, done: false })
            .then(() => {
                newTodo.value = ''
                console.log('Todo Created!')
            })
            .catch((err) => {
                console.log('Error creating todo:', err) // error is also set to authError
            })
    }

    render() {
        const { todos } = this.props;

        // Build Todos list if todos exist and are loaded
        const todosList = !isLoaded(todos)
            ? 'Loading'
            : isEmpty(todos)
                ? 'Todo list is empty'
                : Object.keys(todos).map(
                        (key, id) => (
                            <TodoItem key={key} id={id} todo={todos[key]}/>
                        )
                    )

        return (
            <div>
                <h1>Todos</h1>
                <ul>
                    {todosList}
                </ul>
                <input type="text" ref="newTodo" />
                <button onClick={this.handleAdd}>
                    Add
                </button>
            </div>
        )
    }
}

export default compose(
    firebaseConnect([
        'todos' // { path: 'todos' } // object notation
    ]),
    connect(
        ({ firebase }) => ({ // state.firebase
            todos: dataToJS(firebase, 'todos'), // in v2 todos: firebase.data.todos
            auth: pathToJS(firebase, 'auth') // in v2 todos: firebase.auth
        })
    )
)(Todos)

但是当我运行它时，我得到了这个错误：

500
Internal Server Error.
Cannot read property 'firebase' of undefined
TypeError: Cannot read property 'firebase' of undefined
    at FirebaseConnect.componentWillMount ([MYAPP]/node_modules/react-redux-firebase/lib/firebaseConnect.js:72:45)
    at [MYAPP]/node_modules/react-dom/lib/ReactCompositeComponent.js:347:23
    at measureLifeCyclePerf ([MYAPP]/node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
    at ReactCompositeComponentWrapper.performInitialMount ([MYAPP]/node_modules/react-dom/lib/ReactCompositeComponent.js:346:9)
    at ReactCompositeComponentWrapper.mountComponent ([MYAPP]/node_modules/react-dom/lib/ReactCompositeComponent.js:257:21)
    at Object.mountComponent ([MYAPP]/node_modules/react-dom/lib/ReactReconciler.js:45:35)
    at ReactCompositeComponentWrapper.performInitialMount ([MYAPP]/node_modules/react-dom/lib/ReactCompositeComponent.js:370:34)
    at ReactCompositeComponentWrapper.mountComponent ([MYAPP]/node_modules/react-dom/lib/ReactCompositeComponent.js:257:21)
    at Object.mountComponent ([MYAPP]/node_modules/react-dom/lib/ReactReconciler.js:45:35)
    at ReactCompositeComponentWrapper.performInitialMount ([MYAPP]/node_modules/react-dom/lib/ReactCompositeComponent.js:370:34)

Answer 1

我在许多项目中使用 redux 和 firebase，对我来说，这种方式更干净：

首先你必须安装 firebase npm install --save firebase redux-thunk

在您的操作文件中初始化 firebase 配置

import * as firebase from 'firebase'
const CONFIG={
    apiKey: 'AIzaSyCXydC2cGp_8BNEMqLqpHVSczGyti7j6A8',
    authDomain: 'cabal-production.firebaseapp.com',
    databaseURL: 'https://cabal-production.firebaseio.com',
    storageBucket: 'cabal-production.appspot.com'
}
firebase.initializeApp(CONFIG);

//then you have to create an action creators for make the request to your firebase database, in this case, would be like this:

export function fetchTodos(){
    return dispatch => {
        const todos =  firebase.database().ref()
        return todos.on('value', snapshot => {
            dispatch({
                type:FETCH_TODOS,
                payload: snapshot.val()
            })
        })
    }
}

每次您的数据库更改时，它都会向您的 reducer 发送一个操作，并让您的 reducer 保持清洁。