Soy nuevo en React y estoy creando una aplicación de Spotify con su API. Estoy usando Redux Promise para resolver todas las promesas. Puedo ver datos cuando los consuelo en mi reductor de datos. Pero cuando reviso mi consola, muestra mapDispatchToProps () en Connect (App) debe devolver un objeto simple. En su lugar recibió [promesa de objeto]. Creo que es porque estoy usando Redux Promise vs thunk, pero ¿no debería ser capaz de resolverlos también?

Reductor

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
}

Tienda

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

Creador de acciones

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);
1
James H 10 sep. 2018 a las 06:28

3 respuestas

La mejor respuesta

La función bindActionCreators tomará el primer argumento como JSON. entonces debería ser como a continuación.

const mapDispatchToProps = dispatch => {
  return bindActionCreators(
    {
      getNewReleases: getNewReleases
    },
    dispatch
  );
};
4
Amruth LS 10 sep. 2018 a las 05:08

Intenta devolver tus acciones en mapDispatchToProps así:

const mapDispatchToProps = (dispatch) => ({
 getNewReleases: () => dispatch(getNewReleases())
})
0
aravind_reddy 10 sep. 2018 a las 03:53

Intente usar Object.assign ({}, state.newReleases), o puede usar el operador de propagación como asignar el código al igual que return {... state, state.newReleases}

Ya que su objeto no se puede asignar al estado del objeto

Para una mejor comprensión de esto, consulte este enlace problema de git - 334

0
Vah Run 10 sep. 2018 a las 03:39