无法通过中间件(createAsyncThunk)从我的rails后端api获取数据到redux存储

Question

我正在尝试将数据从rails后端API获取到redux存储。当我在中间件(createAsyncThunk(中控制台.log(data(时，我可以看到数据。然而，我无法将它放入redux商店。

src/redux/doctorsSlice

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import API from '../api/api';
const initialState = [];
export const getDoctors = createAsyncThunk(
'doctors/getDoctors',
async (token) => {
const response = await fetch(`${API}/doctors`, {
headers: {
Authorization: `Bearer ${token}`,
},
});
console.log('responses', response);
if (!response.ok) throw new Error(response.statusText);
const data = await response.json();
console.log(data);
return data.doctors;
},
);
export const doctorsSlice = createSlice({
name: 'doctors',
initialState,
reducers: {},
extraReducers: {
[getDoctors.fulfilled]: (state, action) => action.payload,
},
});
export default doctorsSlice.reducer;

src/redux/store

import { configureStore } from '@reduxjs/toolkit';
import doctorsReducer from './doctorsSlice';
export default configureStore({
reducer: {
doctors: doctorsReducer,
},
});

src/components/DoctorsList

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getDoctors } from '../redux/doctorsSlice';
const DoctorsList = () => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(getDoctors());
}, [dispatch]);
const { doctors } = useSelector((state) => state.doctors);
return (
<div className="">
<h2>Doctors</h2>
</div>
);
};
export default DoctorsList;

src/componets/app

import DoctorsList from './DoctorsList';
function App() {
return (
<div className="App">
<div className="content">
<DoctorsList />
</div>
</div>
);
}
export default App;

src/index

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import App from './components/App';
import store from './redux/store';
import { getDoctors } from './redux/doctorsSlice';
store.dispatch(getDoctors);
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root'),
);

我已经遵循了redux文档。我希望看到存储中的数据。但我得到一个空数组。请对我如何解决这个问题给予任何帮助、支持和建设性的批评。

Answer 1

在getDoctors函数中。假设我在函数的最后一行return data。相反，我最初返回的是不包含数据的data.doctors。