给定动作，reducer返回undefined

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 /组件/ 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-thunk ： https://www.npmjs.com/package/redux-thunk