Javascript 尝试使用redux获取axios数据，并使用useEffect将其加载到组件中

正如标题所说，但我不能这样做。 这就是我到目前为止所做的

我首先创建了一个actions.js文件

import axios from "axios"

export function loadPhones() {
    return (dispatch) => {
        return axios.get("apiurl").then((res) => {
            dispatch(fetchPhones(res.data))
        })
    }
}

export function fetchPhones(phones) {
    return {
        type: "LOAD_PHONES",
        phones: phones
    }
}

据我所知，如果调用loadPhones，该文件将获取api

然后是reducer文件，其中有一些处于phones状态的默认数据，我想用fetcher接收到的数据替换这些数据

let defaultState = {
    phones: {phone1: "sony" }
}

const mainReducer = (state = defaultState, action) => {
    if (action.type === "LOAD_PHONES") {
        return {
            ...state,
            phones: action.phones
        }
    } else {
        return {
            ...state
        }
    }
}

export default mainReducer;

在这之后，我有store.js文件，其中的store是用中间件thunk创建的，用async获取api

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk"
import reducers from "../reducers/reducer.js"

let store = createStore(reducers, applyMiddleware(thunk))

export default store;

之后，我将存储加载到index.js文件中

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux"
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './redux/store/store.js'


ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从“react redux”导入{Provider}
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“./redux/store/store.js”导入存储
ReactDOM.render(
,
document.getElementById（'root'））
);

最后，我转到我的组件，加载数据

import React from 'react';
import './App.css';
import { useEffect } from 'react'
import { connect } from "react-redux"
import { loadPhones } from "./redux/actions/actions.js"

const mapStateToProps = (state) => {
  return state
}

function mapDispatchToProps(dispatch) {
  return {
    loadPhones: () => dispatch(loadPhones)
  }
}

function App(props) {

  useEffect(() => {
    props.loadPhones(); //supposedly we fetch the data
  }, []);


  return (
    <div className="App">
      {console.log(props.phones)}
      {JSON.stringify(props.phones)} //this part wont show the fetch data
    </div>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

从“React”导入React；
导入“/App.css”；
从“react”导入{useEffect}
从“react redux”导入{connect}
从“/redux/actions/actions.js”导入{loadPhones}
常量mapStateToProps=（状态）=>{
返回状态
}
功能图DispatchToprops（调度）{
返回{
loadPhones:（）=>调度（loadPhones）
}
}
功能应用程序（道具）{
useffect（（）=>{
props.loadPhones（）；//我们应该获取数据
}, []);
返回(
{console.log（props.phones）}
{JSON.stringify（props.phones）}//此部分不会显示获取数据
);
}
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）

但所有文件都在那里。props.phones始终是默认对象，useEffect似乎不会触发loadPhones（），而且不管怎样，如果我可以直接从redux获取，我认为我不需要在应用程序中使用useState，但我真的不知道怎么做，我有点不知所措

---

有人能帮忙看看它哪里出了问题吗？假设从未调用actions.js中的axios fetch。

Ciao，如果您想在redux中进行异步调用，应该使用。有了这个库，您可以调用

调度

中的异步资源来检索和存储redux中的数据。在redux中进行异步调用的方式无法工作

---

作为替代方案，您可以使用它来帮助您在使用axios的redux中使用promise。检查示例。这对我帮助很大。

您应该在

mapDispatchToProps

中像这样使用

DispatchToprops

：

loadPhones:（）=>dispatch（loadPhones）

，因此在安装时不调用dispatch，只有在使用loadPhones时才调用。 但是真正的问题是，

loadPhones

没有被调用

dispatch

，请检查我的。应该这样发送：

dispatch(loadPhones());

---

顺便说一句，你有一些控制台错误，它是

onClick

而不是

handleClick

你能在一个示例代码沙盒中复制它，并请求一些示例api吗？@RosenDimov yess给我一秒钟，我想我知道问题出在哪里，但我也希望看到一个演示@RosenDimov，我使用了一个模拟API，当设置发生时，您可以直接调用dispatch。我认为这不是你想要的。真的，罗森，onclick没有意义，因为我没有使用它，我忘了删除它。我已经用你写的东西更新了我的App.js文件，然后我试着在useffect中调用它。但是props.phones的数据保留为默认数据，没有fetchi。事实上，我认为从未调用过action LOAD_手机，我不明白为什么你是对的，这不是什么大问题，我用working sandbox更新了我的回复。它是

loadPhones

在

dispatch

中没有作为函数调用的。混淆可能是因为

loadPhones

（操作）是一个返回函数的函数。