如何使用 redux 从我自己的 api 中获取数据？

Question

我正在尝试使用 redux 从我自己的 api 中获取数据，但我得到一个空对象并且不知道为什么会发生这种情况。 API 是使用 express.js 和 MongoDB 编写的。当我使用邮递员时它可以工作。我也使用 redux-thunk。有人可以解释一下，怎么了？ 任何帮助表示赞赏！

这是我的代码：

这是我的行动：

export const fetchClientsSuccess = (clients: any): FetchDataAction => {
    return {
        type: CLIENTS_FETCH_DATA_SUCCESS,
        payload: clients
    }
}


export const clientsFetchData = (url: string) => {
    return (dispatch: any) => {
        fetch(url)
            .then(response => {
                if(!response.ok){
                    throw new Error(response.statusText);
                }
                
                return response;
            })
            .then(response => {
                response.json();
            })
            .then(clients => {
                dispatch(fetchClientsSuccess(clients))
            })
    }
};

这里是减速器：

const initialState:InitialStateType = {
    entries: [],
    loading: false,
};


export const clientsFetchReducer = (state = initialState, action: any) => {
    switch(action.type){
        case CLIENTS_FETCH_DATA_SUCCESS: 
            return {
                ...state,
                entries: [...action.payload]
            };
        default:
            return state;
    }
}

最后是容器：

import * as React from "react";
import { connect } from 'react-redux';

import { App } from '../components/App/App';
import { clientsFetchData } from '../actions/clients';
import { AppContainerComponentProps, AppContainerState } from './AppContainer.interface';

class AppContainerClass extends React.Component<AppContainerComponentProps, AppContainerState>{
    componentDidMount(){
        this.props.fetchData('/api/clients')
    }

    render(){
        const {clients} = this.props;
        return(
            <App clients={clients}
            />
        );
    }
}


const mapDispatchToProps = (dispatch: any) => {
    return {
        fetchData: (url: string) => dispatch(clientsFetchData(url))

    }
}
const mapStateToProps = (state: any) =>{ 
    return {
        clients: state.entries,
    };
}

export const AppContainer = connect(mapStateToProps, mapDispatchToProps)(AppContainerClass);

Answer 1

我觉得您的请求将发送到 /api/clients，但没有附加任何 baseURL。

您能否确认fetch实际上是在调用像-http://localhost:4000/api/clients这样的URL，而不仅仅是/api/clients...

您是否也可以尝试在您的fetch 调用中添加一个catch 块并在您的respose.json 中添加一个return 关键字，如下所示：

        fetch(url)
            .then(response => {
                if(!response.ok){
                    throw new Error(response.statusText);
                }
                
                return response;
            })
            .then(response => {
                return response.json(); //<--- add return here
            })
            .then(clients => {
                dispatch(fetchClientsSuccess(clients))
            })
            .catch(err=> console.log("ERROR",err); // <------ add this