React - Redux - 在我的应用程序中集成 Firebase 数据库

Question

我正在使用 react、redux 和 redux-thunk 制作一个简单的作品集。目标是从 firebase 捕获数据并将其显示在我的 trabalhos.js 组件。

我不知道如何将数据传递给我的组件。有人可以帮我吗？谢谢

这是我的行动

import Firebase from 'firebase';
import { FETCH_DATA } from './types';

var firebase = require("firebase/app");
require("firebase/database");

var config = {
    apiKey: "AIzaSyDi3f9pSGH833Hq3TBzibCK1SbPOheiGmE",
    authDomain: "portofoliofirebase.firebaseapp.com",
    databaseURL: "https://portofoliofirebase.firebaseio.com",
    storageBucket: "portofoliofirebase.appspot.com",
    messagingSenderId: "656734450041"
};

firebase.initializeApp(config);

var data = firebase.database().ref();

export function fetchData(){
 return dispatch => {
    data.on('value', snapshot => {
        dispatch({
            type: FETCH_DATA,
            payload: snapshot.val()
        });
    });
};
}

这是我的Reducer

import { FETCH_DATA } from '../actions/types';

export default function(state = {}, action) {
switch(action.type){
    case FETCH_DATA:
        return action.payload;      
}

return state;
}

这是我的 rootReducer

import { combineReducers } from 'redux';
import fetchReducer from './fetch_reducer';

const rootReducer = combineReducers({

fetch: fetchReducer

});

export default rootReducer;

这是我的 trabalhos.js 组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';


class Trabalhos extends Component {

    componentWillMount(){
        this.props.fetchData();
    }

    renderList(){

        return(
            <li>

            </li>

        )
    }

    render(){
    return (

        <div>
            <div className="trabalhos">
                <div className="trabalhos_caixa">
                    <div className="row">
                        <div className="col-xs-12">
                            <ul className="no_pad">
                                {this.renderList()}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
}


function mapStateToProps(state){

return { fetch: state.fetch };

}



export default connect(mapStateToProps, actions)(Trabalhos);

谢谢！

Answer 1

首先是一个很好的视频，可以帮助您了解here

现在您在对象调用 fetch 上有了 mapStateToProps。将名称更改为更易于理解的内容（例如数据等）会是一个更好的主意。但这是个人选择。

function mapStateToProps(state){

return { data: state.fetch };

}

现在您可以像访问所有内容一样访问组件中的道具。您使用 this.props.fetch 或者如果您更改名称 this.props.data 。我不知道您的数据是什么样的，但一个好用的方法是 react dev tools，因此很容易看到每个组件上的道具。

最后一件事是做关于 redux 的教程here，这是来自 redux 创建者的免费和很棒的资源；）

希望对你有帮助。