1

Tengo el siguiente componente en donde quiero recuperar información a través de una api, pero en el estado del componente no se está guardando las variables ni funciones que definí para recuperar dicha información. Tengo el siguiente error en consola:

t

'posts' y 'getPosts' son las variables y métodos respectivamente que se están perdiendo en mi componente. Para los reducers tengo configurado de la siguiente manera:

Este es el store.js

import {createStore, applyMiddleware} from 'redux';
// import {composeWithDevTools} from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState={};
const middleware=[thunk];
const store=createStore(
    rootReducer,
    initialState,
    applyMiddleware(...middleware),
);
export default store;

Este es el index.js del reducer

import {combineReducers} from 'redux';
import Posts from './Posts';

export default combineReducers({
  Posts,
});

Este es el reducer de Posts

import {RECUPERAR_POSTS} from '../actions/types';
const initialState={
  posts: [],
};
export default function(state=initialState, action) {
  console.log(action.type);
  switch (action.type) {
    case RECUPERAR_POSTS:
      return {
        ...state,
        posts: action.payload,
      };
    default:
      return state;
  }

}

Componente principal donde cargo al componente Lista, en el cual quiero mostrar la información recuperada de la api.

import React, {Component, Fragment} from 'react';
import ReactDOM from 'react-dom';
import {HashRouter as Router, Route, Switch, Redirect} from 'react-router-dom';
// import PrivateRoute from './common/PrivateRoute';
import {Provider} from 'react-redux';
import {Menu} from './Layout/Menu';
import {Body} from './Layout/Body';
import {DetallePost} from './Posts/DetallePost';
import {cargarUsuario} from '../actions/auth';
import store from '../store';
import {Lista} from './Posts/Lista';

class Blog extends Component {
  // componentDidMount() {
  // store.dispatch(cargarUsuario());
  // }
  render() {
    console.log(store);
    return (
      <Provider store={store}>
      <Router>
        <Fragment>
          <Menu/>
          <Switch>
          <Route exact path="/" component={Lista}/>
          <Route exact path="/Detalle" component={DetallePost}/>
          </Switch>
        </Fragment>
      </Router>
      </Provider>
    );
  }
}


ReactDOM.render(<Blog/>, document.getElementById('app'));

Componente Lista, el problema principalmente creo que está aqui, ya que ni la función para recuperar los datos que es getPosts ni la variable posts la cuál almacenaria los datos, ninguna se está conectado o enlazando con el componente.

import React, {Component, Fragment} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {getPosts} from '../../actions/posts';
export class Lista extends Component {
  static propTypes={
    posts:PropTypes.array.isRequired,
    getPosts:PropTypes.func.isRequired,
  };
  componentDidMount(){
    this.props.getPosts();
  }
  
  render() {
    const {posts}=this.props;
    console.log(this.props);
    return (
      ....Resto de código jsx
     );
  };
};
const mapStateToProps=state=>({
  posts:state.posts,
});
// const mapStateToProps=state=>console.log(state)
export default connect(mapStateToProps,{getPosts})(Lista);

Y aquí tengo mi función 'getPosts' donde hago el llamado a la api para recuperar la información.

import axios from 'axios';
import {tokenConfig} from './auth';
import {RECUPERAR_POSTS} from './types';
// GET
export const getPosts=()=>(dispatch, getState)=>{
  axios.get('api/Post/', tokenConfig(getState))
      .then((res)=>{
     dispatch({
        type: RECUPERAR_POSTS,
        payload: res.data,
     });
      });
};

¿que estoy haciendo mal?

4
  • Parece que en tu ‘combineReducers’ está como ‘Posts’ y no como ‘posts’
    – Isaac
    Commented el 7 sept. 2020 a las 17:22
  • @Isaac le cambíe a 'posts' pero sigo tieniendo el mismo error.
    – soyunewok
    Commented el 7 sept. 2020 a las 17:31
  • porque no usas mapDispatchToProps para usar las acciones? es.redux.js.org/docs/basico/uso-con-react.html#componentsappjs
    – hawks
    Commented el 9 sept. 2020 a las 7:46
  • @hawks pero al final no sería solo una función que me retornaría mi función ? Lo probaré de todas formas... y además ya lo había intentado así antes pero ahora no se xq no me funciona
    – soyunewok
    Commented el 9 sept. 2020 a las 16:40

1 respuesta 1

0

Respondiendo a tu comentario te dejo la siguiente respuesta.

Nosé como lo has probado antes con mapDispatchToProps pero tal como tienes ahora la prop de this.props.getPosts() nunca desencadenará la llamada para recuperar los datos de tu api.

Me explico, la función getPosts es una función de orden superior(High order function), es decir, que devuelve otra nueva función, cuando haces this.props.getPosts() esto devuelve otra función que no se ejecuta y es la que se encarga de recuperar los datos y setearlos en el store.

Deberías hacer lo siguiente:

const mapDispatchToProps = (dispatch) => ({
  getPosts: () => dispatch(getPosts())
});

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

Ahora si que se llamará a la api porque cuando hagas this.props.getPosts() esto ejecutará el dispatch y el dispatch recibe la función que devuelve getPosts osea la llamada a la api y internamente redux-thunk esperará a que se resuelva la función asíncrona y setear los nuevos datos en el store.

Espero que me haya explicado.

2
  • Si, muy clara tu explicación,gracias; ahora puedo entender mejor el funcionamiento, pero sin embargo sigue sin darme resultados,lo que me lleva a pensar que algo anda mal por detrás, asi que probaré con un nuevo proyecto desde 0, gracias una vez más.
    – soyunewok
    Commented el 9 sept. 2020 a las 19:27
  • 1
    de nada. Te recomiendo seguir el tutorial oficial de redux.js.org/introduction/getting-started para profundizar más.
    – hawks
    Commented el 9 sept. 2020 a las 20:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.