Question

正如标题所述，但我无法这样做。这是我到目前为止所做的。

我首先创建了一个action.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。

然后我们有化简文件，其中一些默认数据处于电话状态，我想用提取程序接收的数据替换

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文件，其中使用中间件thunk创建了商店以通过异步方式获取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')
);

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

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)

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

任何人都可以伸出援手，检查失败的地方吗？永远不会调用Afaik actions.js中的axios提取。

Answer 1

Ciao，如果要在redux中进行异步调用，则应使用redux-promise。使用此库，您可以在dispatch内调用异步资源，以在Redux中检索和存储数据。在redux中进行异步调用的方式无效。

作为替代方案，您可以使用redux-axios-middleware来帮助您使用axios在redux中使用promise。查看this示例。这对我有很大帮助。

Answer 2

您应该在dispatch中使用mapDispatchToProps：

loadPhones: () => dispatch(loadPhones)，因此在设置时不调用dispatch，而仅在使用loadPhone时调用。但是真正的问题是loadPhones没有被调用dispatch，请检查我的sandbox。应该这样发送：

dispatch(loadPhones());

然后您会遇到一些控制台错误，它是onClick而不是handleClick。

尝试使用Redux获取axios数据，然后使用useEffect将其加载到组件中

2 个答案: