如何使用 redux 在反应中获取数据？答案

【问题标题】：how to fetch data in react using redux?如何使用 redux 在反应中获取数据？
【发布时间】：2017-12-27 04:20:39
【问题描述】：

你能告诉我吗如何使用 redux 在 react 中获取数据？

这是我的代码 https://codesandbox.io/s/lYMwLM591

import { UPDATED_STORIES } from './actions';
import axios from 'axios';

export default function getTopStories(){
  return (dispatch) => {
    axios.get('data.json').then( res => {
      console.log(res ,"respone");
      dispatch(getTopStoriesAysnc(res))
    })

  }
};

function getTopStoriesAysnc(response){
  return {
    type: UPDATED_STORIES,
    payload: response
  };
}

【问题讨论】：

你想什么时候加载数据？
在组件加载时我已经编写了我的代码请检查codesandbox.io/s/lYMwLM591
你有 redux-thunk 中间件吗？
不确定..:(请检查代码
对于一个非常简单的应用程序/小部件，在 componentDidMount 上调度加载操作通常是可以的。如果您需要更全功能的东西，我实际上编写了一个库，用于轻松绑定同构数据加载器以响应组件github.com/davnicwil/react-frontload

标签： reactjs react-native react-router react-redux redux-thunk

【解决方案1】：

您的反应应用程序很好。您看不到数据的原因是 CORS 问题。如果你检查你的控制台，你会注意到缺少“Access-Control-Allow-Origin”标头。由于您无权访问服务器代码，因此您对此无能为力。

但是，您实际上不必为此使用 axios。由于数据在同一个项目中，您只需导入它们即可。因此，您的 get_updated_stories 将如下所示：

import { UPDATED_STORIES } from './actions';
import data from './data.json'

export default function getTopStories(){
  return (dispatch) => {
    console.log(data ,"respone");
    dispatch(getTopStoriesAysnc(data))
  }
};

function getTopStoriesAysnc(response){
  return {
    type: UPDATED_STORIES,
    payload: response
  };
}

在这里现场观看：https://codesandbox.io/s/pYW4pkRYX

【讨论】：

请分享你的代码..为什么我不会在Hello 组件中调用它

【解决方案2】：

您的问题似乎来自这里：

function mapStateToProps(state) {
   return {
       index :state.counter
   }
}

state.counter 不存在，但state.item 存在。你需要写：

function mapStateToProps(state) {
   return {
       index :state.item
   }
}

【讨论】：

如果它应该获取有关火车的图像和文本，它确实对我有用。