React js，redux 消费 api答案

【问题标题】：React js, redux consume apiReact js，redux 消费 api
【发布时间】：2020-03-26 12:05:27
【问题描述】：

嗯，我正在研究 redux，但我有点怀疑如何最好地使用 api

我有应用程序：

import React,{Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './components/HomePage';
import { Provider } from 'react-redux';
import store from './store';
class App extends Component {

  render(){
    return (
      <div className="App">
      <Provider store={store}>
      <Home/>
      </Provider>
      </div>
    )
  }
}

export default App;

我的

import React, { Component } from 'react'
import {connect} from 'react-redux'
export default class index extends Component {
  render() {
    return (
      <div>

      </div>
    )
  }
}

我的商店：

import { createStore } from 'redux';

function reducer(){
    return [

    ];
}

const store = createStore(reducer);

export default store;

我想知道我的 api 通信应该放在哪里

这会是一个动作吗？

【问题讨论】：

这可能是基于意见的，但我更喜欢在异步动作创建者中这样做，使用thunk 中间件能够异步调度动作
您能根据我发布的内容举一个例子，以便我投赞成票吗？

标签： reactjs redux

【解决方案1】：

考虑使用“redux-thunk”。首先，将 thunk 添加到您的商店，然后您可以将您的 API 调用放入操作创建器中：)

【讨论】：

感谢您的回复，您能给我一个关于我发布的代码的示例吗？
看看这里 :) stackoverflow.com/questions/40250036/… 这是一个非常好的知识来源，甚至还有一个例子说明如何做到这一点

【解决方案2】：

为此使用 Redux-Saga。

https://github.com/redux-saga/redux-saga

来自文档：

redux-saga 是一个旨在制作应用程序副作用的库（即异步的东西像数据获取和不纯的东西像访问浏览器缓存）更易于管理，更高效执行，易于测试，更擅长处理故障。

【讨论】：

这不是矫枉过正吗？
对于 hello world 应用，是的。