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

Question

你能告诉我吗如何使用 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
  };
}

Answer 1

你的 React 应用没问题。您看不到数据的原因是 CORS 问题。如果你检查你的控制台，你会注意到 'Access-Control-Allow-Origin' header 缺失。由于您无权访问服务器代码，因此您对此无能为力。

但是，您实际上不必为此使用 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

Answer 2

您的问题似乎来自这里：

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

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

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

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

how to fetch data in react using redux?

reactjs

react-router

react-native

redux-thunk

react-redux