React - Redux - this.props.fetch.map не является функцией

Question

Im получение ошибка this.props.fetch.map не является функцией, когда я пытаюсь передать мои данные через mapStateToProps к моему компоненту. Если i console logo my Действие im получение Объект. Я не знаю, что делать, передавая этот объект в виде массива. Могут ли некоторые помочь мне?

Это мой компонент 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.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() 
     }); 
    }); 
}; 
} 

Это мой редуктор 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.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 === {}

Просьба указать preloadedState at createStore.

I.e. заменить (в index.js магазин)

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

с

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