state.post is undefined in Blog with React + Redux

Question

state.post is undefined in Blog with React + Redux

Navigation

#1 by (1 votes)

0

I have a problem rendering the list of all the post with React, I want to render a function with a mapping of posts but it tells me that the one that is undefined, that is due. I used mapStateToProps to call the array todos

my component ListPost

import React from 'react';
import {connect } from 'react-redux';
import {cargaPost} from '../acciones/index';
import {Link} from 'react-router-dom';
class ListaPost extends React.Component {
    componentWillMount() {
        this.props.fetchPost();
    }
    renderPost () {
        return this.props.posts.map( post => {
            return(<li className="list-group-item" key={post.id}>
            <span className="text-right">{post.title}</span>
        </li>)
        })
    }
    render() { 
        // const { posts } = this.props;
        // if (!posts) {
        //   return <div>Loading...</div>
        // }
        return (
            <div>
                <div className="text-right">
                    <Link
                    to="/posts/new" 
                    >
                    <button 
                    type="button" 
                    className="btn btn-info">
                    Nuevo Post
                    </button>

                    </Link>
                </div>

                <ul className="list-group">
                    {this.renderPost()}
                </ul>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return { posts: state.posts.todos }
}
export default connect(mapStateToProps, {fetchPost: cargaPost})(ListaPost);

my actions

import axios from 'axios';

export const FETCH_POST = 'FETCH_POST';
export const CREAR_POST = 'CREAR_POST';
const URL = 'http://reduxblog.herokuapp.com/api';
const API_KEY = '1234557';

// ListaPost
export function cargaPost () {
    const solicitud = axios.get(URL)
    .then( res => { console.log(res) })
    return {
        type: FETCH_POST,
        payload: solicitud
    }      
}

and the reducer

import {FETCH_POST} from '../acciones/index';

const estadoInicial = { todos:[], unPost: null }
// PostReducer
export default function(state=estadoInicial, accion) {
    switch(accion.type) {
        case FETCH_POST:
            return {...state, todos: accion.payload.data }
        default:
            return state;
    }
}

react redux

asked by Gerardo Bautista 25.06.2018 в 01:03

source

1 answer

append () does not work in Internet Explorer Execute a PHP Script

score 1 · Answer 1

It seems to me that in the action cargaPost, solicitud = axios.get(URL) a promise returns, the values of the fulfilled promise are only defined within the .then() , but you are returning out of it (you can consologear solution before the return for you to see which is a promise). A possible solution would be to use await to wait for those values and then dispatch them, but in my opinion the best solution would be to use redux-thunks , whose objective is to solve just that problem that you are having. With thunks the solution would be like this:

function cargaPost () {
   return dispatch => {
     axios.get(URL)
       .then( res => { 
         dispatch({
           type: FETCH_POST,
           payload: solicitud
         })
       })
   }
}

I hope it helps you. Greetings!