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

Posted 2023-02-22

【中文标题】如何使用 redux 在反应中获取数据？

【英文标题】：how to fetch data in react using 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

【参考方案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
   

【讨论】：

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