Redux action call renvoie undefined puis défini

Question

travaille actuellement sur un projet de réaction redux.

J'ai été capable d'appeler mon action fetchProjects() pour gérer une requête axios get sur le serveur.

Un problème avec mon code est que la console se connecte comme non défini avant de remplir mon état avec ma liste de projets.

Mon but est de rendre ma liste de projets à l'écran lors de l'appel de la fonction de rendu. Mais le composant se bloque car il rend indéfini quand j'appelle this.props.projects.

Voici le composant qui appelle l'action fetchProjects.

import React, { Component } from 'react'; 
 
import Searchbar from '../../vp-ui/vp-searchbar/vp-searchbar.component.js'; 
 
import { connect } from 'react-redux'; 
 
import * as actions from '../../vp-services/projects/actions'; 
 
require('./vp-genecart.component.scss'); 
 

 
class GeneCart extends Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
     this.state  = { projects: [] }; 
 
     this.props.fetchProjects(); 
 
    } 
 

 
    render() { 
 
     console.log("h1", this.props.projects); 
 
     return (
 
      <div> 
 
       hello 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 
function mapStateToProps(state) { 
 
    return { 
 
     projects: state.projects.projects 
 
    }; 
 
} 
 

 
export default connect(mapStateToProps, actions)(GeneCart)

Voici l'action qui exécute la requête get

import axios from 'axios'; 
 
import history from '../../history'; 
 
import instance from '../instance'; 
 
import { 
 
    PROJECTS_FETCH, 
 
    PROJECTS_ERROR 
 
} from './types'; 
 

 
export function fetchProjects() { 
 
    return function(dispatch) { 
 
     instance.get(
 
      `api/projects/`, 
 
      { 
 
       withCredentials: true 
 
      } 
 
     ).then((response) => { 
 
       var projects = response.data.results; 
 
       dispatch({ 
 
        type: PROJECTS_FETCH, 
 
        payload: projects 
 
       }); 
 
      }) 
 
      .catch((error) => { 
 
       dispatch(projectsError('Couldn\'t get projects')); 
 
      }); 
 
    } 
 
}

Voici le réducteur

import { 
 
    PROJECTS_FETCH, 
 
    PROJECTS_ERROR 
 
} from './types'; 
 

 
export default function(state={}, action) { 
 
    switch(action.type) { 
 
     case PROJECTS_FETCH: 
 
      return { ...state, projects: action.payload }; 
 
     case PROJECTS_ERROR: 
 
      return { ...state, error: action.payload }; 
 
    } 
 

 
    return state; 
 
}

Voici comment il apparaît sur mon écran

Answer 1

Le problème est que projects dans votre magasin Redux est vraiment undefined avant que les données sont extraites. Par conséquent, si projects est supposé renvoyer un tableau, vous devez le définir sur un tableau vide dans l'état initial.

const initialState = { 
    projects: [] 
}; 

export default function(state = initialState, action) { 
    switch(action.type) { 
     case PROJECTS_FETCH: 
      return { ...state, projects: action.payload }; 
     case PROJECTS_ERROR: 
      return { ...state, error: action.payload }; 
    } 

    return state; 
} 

EDIT: lire le commentaire, je pense que ce que vous voulez faire est plus probable quelque chose comme ceci:

réducteur

const initialState = { 
    projects: null 
}; 

composant

render() { 
    if (this.props.projects === null) return null; // Or a loading component 
    return (
     // Your previous render code here 
    ); 
}