React-redux 存储状态为空

Question

我让 axios 发出获取请求以获取船只及其信息列表的请求，我正在尝试使用 redux slice，并使用 dispute 填充数据，但是状态总是空 dispute 没有任何错误

vesselSlice :

import { createSlice } from "@reduxjs/toolkit";
import { api } from "../components/pages/screens/HomeScreen";
const vesselSlice = createSlice({
  name: "vessels",
  initialState: {
    vessels: [],
  },
  reducers: {
    getVessels: (state, action) => {
      state.vessels = action.payload;
    },
  },
});

export const vesselReducer = vesselSlice.reducer;
const { getVessels } = vesselSlice.actions;

export const fetchVessels = () => async (dispatch) => {
  try {
    await api
      .get("/vessels")
      .then((response) => dispatch(getVessels(response.data)));
  } catch (e) {
    return console.error(e.message);
  }
};

HomeScreen.js :

import React, { useEffect } from "react";
import VesselCard from "../../VesselCard";
import axios from "axios";
import { useDispatch, useSelector } from "react-redux";
import { fetchVessels } from "../../../features/vesselSlice";

export const api = () => {
  axios
    .get("http://127.0.0.1:8000/api/vessels/info")
    .then((data) => console.log(data.data))
    .catch((error) => console.log(error));
};

function HomeScreen() {
  const { vessels, isLoading } = useSelector((state) => state.vessels);
  const dispatch = useDispatch();

  // This part:
  useEffect(() => {
    fetchVessels(dispatch);
  }, [dispatch]);

  return (
    <div>
      Fleet vessels :
      <div className="fleet-vessels-info">
        {vessels.map((vessel) => (
          <VesselCard vessel={vessel} />
        ))}
      </div>
    </div>
  );
}

export default HomeScreen;

Answer 1

您通过这种方式接收派遣。没有从任何中间件收到它。

export const fetchVessels = async (dispatch) =>{}

如果您想继续使用您的方法，请按此方式调用函数

 useEffect(() => {
    fetchVessels()(dispatch);
  }, [dispatch]);

Api函数错误

export const api = async () => {
  try {
    const res = await axios.get("http://127.0.0.1:8000/api/vessels/info");
    return res.data;
  } catch (error) {
    console.log(error);
  }
};

export const fetchVessels = () => async (dispatch) => {
  try {
    await api()
         .then((data) => dispatch(getVessels(data)));
  } catch (e) {
    return console.error(e.message);
  }
};

React-redux 存储状态为空

React-redux store state is empty

reactjs

redux

react-redux

redux-toolkit