React - Redux - this.props.fetch.map is not a function

Question

Im getting the error this.props.fetch.map is not a function when i try to pass my data via mapStateToProps to my component. If i console logo my Action im getting an Object .I dont know what to do pass this object as an array. Could some on help me ?

This is my component 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);

This is my action 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()
        });
    });
};
}

This is my reducer 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;
}

This is my rootReducer index.jx

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

const rootReducer = combineReducers({

fetch: fetchReducer

});

export default rootReducer;

Store 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'));

Thank You !

Answer 1

I guess that initial state of Redux store is empty in your case. I mean that render fires before any reducer fires, so this.props.fetch === {}

Please specify preloadedState at createStore.

I.e. replace (at Store index.js)

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

with

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