title: Redux reducer doesn't update store/redux-promise not resolving
body: <p>So I've recently started learning Redux and now I'm trying to make my first app with it, but I've stumbled upon a problem which I cannot resolve on my own. Basically I want a user to click a button (there will be authentication) and fetch all his or hers data from Firebase and display it.</p>
  
  <p>Here is my index.js:</p>
  
  <pre><code>// Dependencies
  import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware, combineReducers } from 'redux';
  import createHistory from 'history/createBrowserHistory';
  import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux';
  import ReduxPromise from "redux-promise";
  import ReduxThunk from 'redux-thunk';
  
  // Reducers
  import rootReducer from './reducers';
  
  // ServiceWorker
  import registerServiceWorker from './registerServiceWorker.js';
  
  // Styles
  import './styles/index.css';
  
  // Components
  import App from './containers/App.js';
  
  const history = createHistory();
  
  const middleware = routerMiddleware(history);
  
  // Create store
  const store = createStore(
    combineReducers({
      ...rootReducer,
      router: routerReducer
    }),
    applyMiddleware(ReduxThunk, middleware, ReduxPromise)
  )
  
  ReactDOM.render((
    &lt;Provider store={store}&gt;
      &lt;ConnectedRouter history={history}&gt;
        &lt;App /&gt;
      &lt;/ConnectedRouter&gt;
    &lt;/Provider&gt;
  ), document.getElementById('root'));
  
  registerServiceWorker();
  </code></pre>
  
  <p>And my main container, App.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Route, Switch, withRouter } from 'react-router-dom'
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import firebase from 'firebase';
  
  import firebaseConfig from '../firebaseConfig.js';
  
  // Actions
  import { fetchAllMonths } from "../actions/index";
  
  // Static components
  import Nav from '../components/Nav.js';
  
  // Routes
  import CurrentMonth from '../components/CurrentMonth.js';
  import AddNewMonth from '../components/AddNewMonth.js';
  import Archive from '../components/Archive.js';
  import Settings from '../components/Settings.js';
  
  class App extends Component {
    constructor (props) {
      super(props);
  
      this.login = this.login.bind(this);
    }
  
    componentWillMount() {
      firebase.initializeApp(firebaseConfig);
      firebase.auth().signInAnonymously().catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
      });
    }
  
    login() {
      this.props.fetchAllMonths();
    }
  
    render() {
      if (this.props.data === undefined) {
        return (
          &lt;button onClick={this.login}&gt;Login&lt;/button&gt;
        )
      } else if (this.props.data !== undefined) {
        return (
          &lt;main className="main-container"&gt;
            &lt;Nav user="user"/&gt;
            &lt;Switch&gt;
              &lt;Route exact path='/' component={CurrentMonth}/&gt;
              &lt;Route path='/aktualny' component={CurrentMonth}/&gt;
              &lt;Route path='/nowy' component={AddNewMonth}/&gt;
              &lt;Route path='/archiwum' component={Archive}/&gt;
              &lt;Route path='/ustawienia' component={Settings}/&gt;
            &lt;/Switch&gt;
          &lt;/main&gt;
      );
      }
    }
  }
  
  function mapDispatchToProps(dispatch) {
    return bindActionCreators({ fetchAllMonths }, dispatch);
  }
  
  function mapStateToProps({ data }) {
    return { data };
  }
  
  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))
  </code></pre>
  
  <p>Main action, fetchAllMonths:</p>
  
  <pre><code>// import firebase from 'firebase';
  // Firebase Config
  // import axios from 'axios';
  
  export const FETCH_ALL_MONTHS = 'FETCH_ALL_MONTHS';
  
  export function fetchAllMonths() {
    /*const database = firebase.database();
    const data = database.ref('/users/grhu').on('value', function(snapshot) {
      return snapshot.val();
    });
  
    console.log(data) */
  
    const data = fetch('https://my-finances-app-ef6dc.firebaseio.com/users/grhu.json')
      .then(async (response) =&gt; response.json())
      .then(data =&gt; {
          console.log(data);
          return data;
        }
      )
  
    console.log(data);
  
    return {
      type: FETCH_ALL_MONTHS,
      payload: data
    };
  };
  </code></pre>
  
  <p>Reducers index.js:</p>
  
  <pre><code>import { combineReducers } from "redux";
  import data from "./reducer_load_from_db";
  
  const rootReducer = combineReducers({
    data: data
  });
  
  export default rootReducer;
  </code></pre>
  
  <p>And finally my reducer:</p>
  
  <pre><code>import { FETCH_ALL_MONTHS } from "../actions/index";
  
  export default function(state = [], action) {
    switch (action.type) {
      case FETCH_ALL_MONTHS:
        return [action.payload.data, ...state];
      default:
        return state;
    }
    return state;
  }
  </code></pre>
  
  <p>So I'm sure that fetch works fine, because console.log(data) gives me a valid JSON file, but second console.log(data) with the passed const gives me a promise, which then I send as a payload to a Reducer. CreateStore also seems to work, because in the React dev console I can see a "data" prop in App container. I use redux-promise which should resolve the Promise in payload and return a JSON to the store, but data remains undefined. Also tried redux-promise-middleware, but again, no luck.</p>
  
  <p>What am I missing? I've looked at that code for several hours and I cannot understand what is wrong with it.</p>
  
  <p>I'll appreciate all the answers, but i really want to understand the issue, not just copy-paste a solution.</p>
  
  <p>Thanks in advance!</p>