时间戳

首页 > 解决方案 > 无法通过中间件（createAsyncThunk）从我的 Rails 后端 api 获取数据到 redux-store

reactjs - 无法通过中间件（createAsyncThunk）从我的 Rails 后端 api 获取数据到 redux-store

问题描述

我正在尝试从我的 rails 后端 API 获取数据到 redux 存储。当我在中间件 (createAsyncThunk) 中使用 console.log(data) 时，我可以看到数据。但是，我无法将其放入 redux 商店。

src/redux/医生切片

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/存储

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/组件/应用程序

import DoctorsList from './DoctorsList';

function App() {
  return (
    <div className="App">
      <div className="content">

        <DoctorsList />
      </div>
    </div>

  );
}

export default App;

源/索引

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 文档。我希望在店内看到数据。但我得到一个空数组。欢迎任何关于我如何解决这个问题的帮助、支持和建设性的批评。

标签： reactjsapireduxreact-reduxjwt

解决方案

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

推荐阅读