Reduxアクションコールは、定義されていない戻り値を返します。

Question

現在、react reduxプロジェクトで作業しています。

私は自分のアクションfetchProjects（）を呼び出して、サーバーへのAxios get要求を処理することができました。

問題は自分のプロジェクトのリストで状態を入力する前に、コンソールが定義されていないとしてログを記録することです。

私の目標は、レンダリング機能を呼び出すと、画面上に自分のプロジェクトのリストをレンダリングすることです。しかし、this.props.projectsを呼び出すと、コンポーネントが未定義にレンダリングされるので、コンポーネントがクラッシュします。

ここには、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)

ここで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')); 
 
      }); 
 
    } 
 
}

を実行するアクションは、減速は

です

この問題は、データがフェッチされる前に、あなたのReduxのストア内projectsが本当にundefinedであるということです、それは私の画面上

Answer 1

をアップ方法を示しています。したがって、projectsが配列を返すと想定されている場合は、初期状態で空の配列に設定する必要があります。

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：

減速

const initialState = { 
    projects: null 
}; 

コンポーネント

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

：コメントを読んで、私は何がやりたいことは、より可能性があり、このような何かを考えます