Question

以下是我将数据返回到Container的reducer文件：

import FETCH_MEDIAID from '../actions/index';

export default function(state = [], action){
  console.log('Action Received', action);
  switch(action.type){
    case FETCH_MEDIAID:
      return action;
  }
  return state;
}

我的获取请求如下（一旦用户在输入字段中插入Instagram内容网址，我想返回有关Instagram内容的媒体元数据）：

import axios from 'axios';

export const FETCH_MEDIAID = 'FETCH_MEDIAID';

const RootURL= `https://api.instagram.com/oembed?url=`;

export function fetchMediaID(shortcode){

  const url = `${RootURL}${shortcode}`;

  const request = axios.get(url);

  console.log('Request is: ', request);

  return {
    type: FETCH_MEDIAID,
    payload: request
  };
}

我是处理API响应的新手，所以任何帮助都会很棒。谢谢。如果您需要进一步的信息，请告诉我。

输出组件：

import React, {Component} from 'react';
import {connect} from 'react-redux';

 class Output extends React.Component {

  renderMediaid(metaData){
     return(
       <tr>
         <td>{metaData.media_id}</td>
       </tr>
     );
   }
  render(){
    return(
      <table className='table table-hover'>
        <tbody>
           {this.props.mediaid.map(this.renderMediaid)}
        </tbody>
      </table>
      );
    }
}

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


    export default connect(mapStateToProps)(Output);

Answer 1

switch(action.type){
  case FETCH_MEDIAID:
    return action;
}

这在减速机中几乎不会发生。首先，您的操作是一个普通的旧JavaScript对象，并且您已指定此reducer的默认状态是数组。您几乎肯定希望返回一个作为有效负载的数组。如下所示：

case FETCH_MEDIAID:
  return [ ...action.payload ]

更有可能，假设payload是一个数组。

const request = axios.get(url);
return {
  type: FETCH_MEDIAID,
  payload: request
};

Axios基于承诺。在您返回对象文字时，request将是一个承诺，但异步操作（向服务器发出实际请求）不太可能完成。更常见的是：

return axios.get(url)
  .then(response => ({
    type: FETCH_MEDIAID,
    payload: response
  });

请注意，如果response不是一个简单的数组（也许它有data属性，上面有数组？）那么你需要修改你的reducer来处理这个问题，或指定response.data作为payload值。

如何将数据从reducer返回到容器？

1 个答案: