React js，redux 消费 api

Posted 2023-02-22

【中文标题】React js，redux 消费 api

【英文标题】：React js, redux consume 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 中间件能够异步调度动作

您能根据我发布的内容举一个例子，以便我投赞成票吗？

【参考方案1】：

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

【讨论】：

感谢您的回复，您能给我一个关于我发布的代码的示例吗？

看看这里 :) ***.com/questions/40250036/… 这是一个非常好的知识来源，甚至还有一个例子说明如何做到这一点

【参考方案2】：

为此使用 Redux-Saga。

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

来自文档：

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

【讨论】：

这不是矫枉过正吗？

对于 hello world 应用，是的。