mapDispatchToProps() in Connect(App) must return a plain object. Instead received [object Promise]

mapdispatchtoprops not working
this.props.dispatch is not a function
mapdispatchtoprops multiple actions
redux dispatch
mapstatetoprops
connect()() redux
mapdispatchtoprops shorthand
redux pass dispatch as prop

I am new to React and building a Spotify App with their API. I am using Redux Promise to resolve all promises. I can see data when I console it in my reducer of the data. But when I check my console it shows mapDispatchToProps() in Connect(App) must return a plain object. Instead received [object Promise]. I am thinking is it because I'm using Redux Promise vs thunk, but shouldn't it be able to resolve them as well?

Reducer

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

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

Store

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './App';
import reducers from './reducers';
import ReduxPromise from 'redux-promise'; // Look at action creator for ReduxPromise use

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('#root'));

Action Creator

export const getNewReleases = () => {
    console.log('ran')
        let request = axios.get("https://api.spotify.com/v1/browse/new-releases?country=SE", {
            headers: {
                'Authorization': 'Bearer ' + accessToken
            }
        })

        return{
            type: NEW_RELEASES,
            payload:  request
        }

App.Js

import React, { Component } from 'react';
import './App.css';
import Spotify from 'spotify-web-api-js';
import { getNewReleases }  from './actions'
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';



const spotifyWebApi = new Spotify();

class App extends Component {
  constructor(props) {
    super(props)
    const params = this.getHashParams();
    this.state = {
      welcome: "Welcome to SpotiDate",
      accessToken: params.access_token,
      loggedIn: params.access_Token ? true : false,
      nowPlaying: {
        name: 'Not Checked',
        images: ''
      }
    }
    if (params.access_token) {
      spotifyWebApi.setAccessToken(params.access_token);
    }
  }

  getHashParams() {
    var hashParams = {};
    var e, r = /([^&;=]+)=?([^&;]*)/g,
      q = window.location.hash.substring(1);
    while (e = r.exec(q)) {
      hashParams[e[1]] = decodeURIComponent(e[2]);
    }
    return hashParams;
  }

  componentWillMount() {
    spotifyWebApi.setAccessToken(this.state.accessToken)
    localStorage.setItem('accessToken', this.state.accessToken);
    const storedToken = localStorage.getItem('accessToken');
    getNewReleases(storedToken);
  }




  render() {
    return (
      <div className="App">
        <h3>{this.state.welcome}</h3>
        <div>
          <img src={this.state.nowPlaying.image} />
        </div>
        <button onClick={() => getNewReleases()}>Get New Releases</button>
        <div className="new-releases">
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return{
    newReleases: state.newReleases
  }

}

const mapDispatchToProps = (dispatch) => { 
  return bindActionCreators(getNewReleases, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

the function bindActionCreators will take 1st argument as JSON. so it should be like below.

const mapDispatchToProps = dispatch => {
  return bindActionCreators(
    {
      getNewReleases: getNewReleases
    },
    dispatch
  );
};

Basic tutorial fail, mapDispatchToProps() in Connect(FAQ) must , However, I keep having this warning mapDispatchToProps() in Connect(FAQ) must return a plain object. Instead received undefined . Also, as I'm  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

try to use Object.assign({}, state.newReleases), or you can use the spread operator like assigning the code just like return {...state,state.newReleases}

since your object is unable to be mapped to the object state

For further understanding of this, please check this link git issue - 334

mapStateToProps() in Connect(ReduxForm) must return a plain , mapStateToProps() in Connect(ReduxForm) must return a plain object. Instead received undefined. Any ideas why? Thank you!! This is my code Stack Overflow Public questions and in connect() must return a plain object, Instead received Undefined. mapDispatchToProps() in Connect(App) must return a

Try returning you actions in mapDispatchToProps like this:

const mapDispatchToProps = (dispatch) => ({
 getNewReleases: () => dispatch(getNewReleases())
})

Connect: Dispatching Actions with mapDispatchToProps · React , By default, a connected component receives props.dispatch and can dispatch If you don't specify the second argument to connect() , your component will receive store handle the data flow is how to implement the behavior, rather than what it does. Your mapDispatchToProps function should return a plain object:. Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Connect function in Redux - Jennifer Volpe, Connect() and Provider are 2 of the most important pieces of React Redux middleware mapStateToProps must return a plain object, which will be merged into the The <App /> component now has direct access to application state! 2. [ mapDispatchToProps(dispatch, [ownProps]): dispatchProps ] (Function OR object​). Connect: Dispatching Actions with mapDispatchToProps. As the second argument passed in to connect, mapDispatchToProps is used for dispatching actions to the store. dispatch is a function of the Redux store. You call store.dispatch to dispatch an action. This is the only way to trigger a state change.

must return a plain object. Instead received undefined - html, mapStateToProps() in Connect(EquipmentMetadata) must return a plain object. return {} } export default connect( mapStateToProps, mapDispatchToProps )( I am using redux in my react app and I am getting undefined when I access redux const store = createStore( reducer, applyMiddleware(promise) ) return store  This is a rather common case, so often you don't need to write mapDispatchToProps, and you can pass this map in object instead. Let's recap. Normally, mapDispatchToProps accepts the dispatch function as an argument so that you can return the props through inject into the React component that each can dispatch certain actions using the dispatch

mapStateToProps() in connect() must return a plain object, Instead , mapStateToProps() in connect() must return a plain object, Instead received Undefined - react-native. I have implemented redux to complete a TODO application. mapStateToProps = state => { todos: state.todos } const mapDispatchToProps  “Uncaught Error: Invariant Violation: mapStateToProps must return an object. Instead received Map {…” I’m able to do something like @connect(state => {return {state};}), and then unwrap the object in App’s render(), but I get the sense that this is not an ideal solution.

Comments
  • Just a side note: don't use mapDispathToProps, just pass down in your actions to the connect() function like this: export default connect(mapStateToProps, {getNewReleases})(App);
  • Thank you, but I am wondering how would you dispatch your actions?
  • These actions will then be available in this.props. So In your example code, it should be something like: this.props.getNewReleases() See also: stackoverflow.com/a/41769974/1727948
  • I have tried object assign, but it is still returning promise. I'm thinking if I'm resolving it correctly