Question

使用反应， 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。我不知道你的数据是什么样的，但使用的好处是反应dev tools，这样就可以很容易地看到每个组件上的道具。

最后一件事是关于redux here的教程，这是免费的，并且来自redux创建者的一个很棒的资源;）

希望能帮到你。

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

1 个答案: