Reactjs 如何在redux中通过api获取数据？

我是reactjs/redux的初学者，找不到一个简单易用的例子来说明如何使用api调用在redux应用程序中检索数据。我想您可以使用jquery ajax调用，但可能还有更好的选择？

创建一个操作，在其中执行对API的请求。您可以使用axios或fetch之类的库来返回承诺

actions/index.js：

import axios from 'axios';

export const FETCH_SOMETHING= 'FETCH_SOMETHING;
const ROOT_URL = 'http://api.youapi.com';

export function fetchWeather(city) {

    const url = `${ROOT_URL}&q=${aParamYouMayNeed}`;
    const request = axios.get(url);

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

然后，在减速器中，一旦按照以下方式解决，则使用承诺结果：

减速器/减速器\u.js：

import { FETCH_SOMETHING} from '../actions/index';

export default function(state = [], action) {
    switch (action.type) {
        case FETCH_SOMETHING:
        return [ action.payload.data, ...state ];
    }

    return state;
}

代码借用自Stephen Grider。这是他的回复：

JSfiddle

它使用redux、redux thunk和fetch

提取方法

function fetchPostsWithRedux() {
    return (dispatch) => {
    dispatch(fetchPostsRequest());
    return fetchPosts().then(([response, json]) =>{
        if(response.status === 200){
        dispatch(fetchPostsSuccess(json))
      }
      else{
        dispatch(fetchPostsError())
      }
    })
  }
}

function fetchPosts() {
  const URL = "https://jsonplaceholder.typicode.com/posts";
  return fetch(URL, { method: 'GET'})
     .then( response => Promise.all([response, response.json()]));
}

上述行动：

（注意：您可以定义许多操作，例如fetchPostRequest可用于显示加载指示器。或者，您可以在HTTP状态代码不同的情况下分派不同的操作。）

在你的减速器里，你可以把柱子装到州里

const reducer = (state = {}, action) => {
  switch (action.type) {
    case "FETCH_REQUEST":
      return state;
    case "FETCH_SUCCESS": 
      return {...state, posts: action.payload};
    default:
      return state;
  }
} 

连接组件后，可以访问组件内的状态和操作

connect(mapStateToProps, {fetchPostsWithRedux})(App);

---

你有plunker什么的吗？没有，但是你可以在我的回复中克隆我已经测试过的样本（刚刚编辑过），并且运行良好。为什么你不需要在reducer中使用

。然后（）

，以确保承诺已经实现，并且

数据
不是
未定义的
？@jhuang问得好。当我说“使用承诺结果，一旦解决如下”时，我忘了提到Stephen Grided提供的示例使用了一个名为redux promise的库，该库必须应用于入口点，如下所示：applyMiddleware（ReduxPromise）（createStore）；该库处理使代码更干净的承诺。使用我得到的这段代码，
Uncaught（in promise）错误：还原程序可能不会分派操作。
返回的
承诺了什么。所有（[response，response.json（）]）
都做了什么？为什么不返回
response.json（）
？
connect(mapStateToProps, {fetchPostsWithRedux})(App);