が反応 - Reduxのを - this.props.fetch.mapは関数ではありません

Question

イムエラーthis.props.fetch.mapを取得し、私は私のコンポーネントにmapStateToProps経由で私のデータを渡すためにしようとすると、機能ではありません。もし私がコンソールロゴ私のアクション私はオブジェクトを取得しています。私は何をすべきかわからないこのオブジェクトを配列として渡します。いくつか私を助けることができますか？

これは、これは私のアクションは

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

これはfetch_reducer.js

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

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

return state; 
} 

私の減速であるとindex.jsある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 _.map(this.props.fetch.trabalhos ,() => { 

      return(

       <li key={this.props.fetch.trabalhos.miristica.id}> 
        <img src={this.props.fetch.trabalhos.miristica.img} /> 
        <p>{this.props.fetch.trabalhos.miristica.descricao}</p> 
        <p>{this.props.fetch.trabalhos.miristica.nome}</p>    
       </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); 

私のコンポーネントでありますこれは私の根です減速index.jx

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

const rootReducer = combineReducers({ 

fetch: fetchReducer 

}); 

export default rootReducer; 

ストアindex.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import { Router, browserHistory } from 'react-router'; 
import reducers from './reducers'; 
import routes from './routes'; 
import * as firebase from 'firebase'; 
import reduxThunk from 'redux-thunk' 

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore); 
const store = createStoreWithMiddleware(reducers); 

ReactDOM.render(
<Provider store={store}> 
<Router history={browserHistory} routes={routes} /> 
</Provider> 
, document.querySelector('.container')); 

はありがとうございました！

Answer 1

あなたのケースでは、Reduxストアの初期状態は空であると思います。減速機が始動する前に火を出すので、this.props.fetch === {}

createStoreで事前に指定してください。

I.e.

あなたは `state.fetch`」を割り当てなかった

const store = createStore(reducers, {fetch:[]}, applyMiddleware(reduxThunk))