与えられた動作、減速機は返されません

Question

私は最初のreact.jsアプリをやっています。 Visual Studio 2017で反応& reduxテンプレートプロジェクトの問題が発生したため、Visual Studio 2017のWeb APIと、Visual Studio Codeの反応プロジェクト全体が終了しました（関連性があるかどうかはわかりません）。 Web APIを消費しようとしていますが、action.payload.dataは常に定義されていません。また、私はクロスオリジンエラーを取得します。私は何が間違っているのか分からない。

のsrc /アクション/ index.js

import axios from 'axios'; 

export const FETCH_HOME = 'fetch_home'; 

const R00T_URL = 'http://localhost:52988/api'; 

export function fetchHome() { 
    const request = axios.get(`${R00T_URL}/home`, { crossdomain: true }); 

    console.log(`request: ${request}`); 
    return { 
     type: FETCH_HOME, 
     payload: request 
    }; 
} 

のsrc /減速/ reducer_home.js

import { FETCH_HOME } from '../actions'; 

export default function(state = {}, action) { 
    if (typeof action.payload === 'undefined') { 
     console.log('action undefined'); 
     return state; 
    } 

    switch (action.type) { 
     case FETCH_HOME:    
      console.log(`action: ${action}`); 
      return action.payload.data; 
     default: 
      return state; 
    } 
} 

のsrc /コンポーネント/ home_index.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { fetchHome } from '../actions'; 

class HomeIndex extends Component { 
    constructor(props) { 
     super(props); 
    } 

    componentDidMount() { 
     this.props.fetchHome(); 
    } 

    render() { 
     console.log(`props: ${this.props}`); 
     return (
      <div> 
       <h1>Home Index</h1>     
      </div> 
     ); 
    } 
} 

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

export default connect(mapStateToProps, { fetchHome })(HomeIndex); 

SRC/index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import { BrowserRouter, Route } from 'react-router-dom'; 
import reducers from './reducers'; 
import HomeIndex from './components/home_index'; 
import promise from 'redux-promise'; 

const createStoreWithMiddleware = applyMiddleware(promise)(createStore); 

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <BrowserRouter> 
     <div> 
     <Route path="/" component={HomeIndex} /> 
     </div> 
    </BrowserRouter> 
    </Provider> 
    , document.querySelector('.container')); 

Answer 1

への呼び出しaxios.get（）は非同期です。

のsrc /アクション/ index.js

... 

export function fetchHome(result) { 
    return { 
    type: FETCH_HOME, 
    payload: result 
    } 
} 

...そして非同期要求を実行します。

あなたはおそらく、あなたのアクションの作成者は、このように、アクションオブジェクトを返すようにしたいですあなたのコンポーネントにアクションクリエーターを呼び出して、結果を呼び出してください：

src/components/home_index.js

... 

componentDidMount() { 
    axios.get(`${R00T_URL}/home`, { crossdomain: true }) 
    .then(result => { 
     console.log(`result: ${result}`); 
     this.props.fetchHome(result) 
    }) 
    .catch(err => { 
     // Handle error 
    }) 
} 

... 

あなたは、アクションの作成者に非同期部分を維持したい場合は、Reduxの-サンクを使用して見てください： https://www.npmjs.com/package/redux-thunk